Esempi di griglia Bootstrap

Disposizioni di griglia di basa per familiarizàvi cù a custruzione in u sistema di griglia Bootstrap.

Cinque livelli di griglia

Ci hè cinque livelli à u sistema di griglia Bootstrap, unu per ogni gamma di dispusitivi chì supportemu. Ogni livellu principia da una dimensione minima di vista è s'applica automaticamente à i dispositi più grandi, salvu s'ellu hè annullatu.

.col-4
.col-4
.col-4
.col-sm-4
.col-sm-4
.col-sm-4
.col-md-4
.col-md-4
.col-md-4
.col-lg-4
.col-lg-4
.col-lg-4
.col-xl-4
.col-xl-4
.col-xl-4

Trè colonne uguali

Ottene trè colonne di larghezza uguale partendu da i desktop è scalate à grandi desktop . Nant'à i dispositi mobili, tablette è sottu, e culonne s'acumularanu automaticamente.

.col-md-4
.col-md-4
.col-md-4

Trè culonni ineguali

Ottene trè colonne partendu da i desktop è scalate à grandi desktop di diverse larghezze. Ricurdativi, e culonni di griglia devenu aghjunghje à dodici per un unicu blocu horizontale. Più di questu, è e culonne cumincianu à stacking ùn importa micca a vista.

.col-md-3
.col-md-6
.col-md-3

Dui culonni

Ottene duie colonne chì partenu da i desktop è scalanu à grandi desktop .

.col-md-8
.col-md-4

Larghezza piena, una sola colonna

Nisuna classi di griglia sò necessarie per elementi di larghezza completa.


Dui culonni cù duie colonne nidificate

Sicondu a documentazione, a nidificazione hè faciule - basta mette una fila di colonne in una colonna esistente. Questu vi dà duie colonne chì partenu da i desktop è scalanu à grandi desktop , cù altre duie (larghezza uguale) in a colonna più grande.

À e dimensioni di i dispositi mobili, tablette è giù, sti culonni è e so culonne nidificate si stack.

.col-md-8
.col-md-6
.col-md-6
.col-md-4

Mixed: mobile è desktop

U sistema di griglia Bootstrap v4 hà cinque livelli di classi: xs (extra small), sm (picculu), md (medium), lg (grande) è xl (extra large). Pudete aduprà quasi ogni cumminazione di queste classi per creà layout più dinamichi è flessibili.

Ogni livellu di classi scala, vale à dì chì se pensa à stabilisce a stessa larghezza per xs è sm, avete solu bisognu di specificà xs.

.col-12 .col-md-8
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6
.col-6

Mistu: mobile, tableta è desktop

.col-12 .col-sm-6 .col-lg-8
.col-6 .col-lg-4
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4