Esempi di griglia Bootstrap

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

In questi esempii a .themed-grid-colclassa hè aghjuntu à e culonni per aghjunghje un pocu tematicu. Questa ùn hè micca una classa chì hè dispunibule in Bootstrap per automaticamente.

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
.col-xxl-4
.col-xxl-4
.col-xxl-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

Alternativa di trè colonne uguali

Utilizendu e .row-cols-*classi, pudete facilmente creà una griglia cù colonne uguali.

.colfigliolu di .row-cols-md-3
.colfigliolu di .row-cols-md-3
.colfigliolu di .row-cols-md-3

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, stu class infix ùn hè micca usatu), 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ì se pensa à stabilisce a stessa larghezza per md, lg è xl, avete bisognu di specificà md.

.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-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

Gouttières

Cù .gx-*classi, i gutters horizontali ponu esse aghjustatu.

.colcù i .gx-4canotti
.colcù i .gx-4canotti
.colcù i .gx-4canotti
.colcù i .gx-4canotti
.colcù i .gx-4canotti
.colcù i .gx-4canotti

Aduprate e .gy-*classi per cuntrullà i canali verticali.

.colcù i .gy-4canotti
.colcù i .gy-4canotti
.colcù i .gy-4canotti
.colcù i .gy-4canotti
.colcù i .gy-4canotti
.colcù i .gy-4canotti

Cù .g-*classi, i gutters in i dui direzzione ponu esse aghjustatu.

.colcù i .g-3canotti
.colcù i .g-3canotti
.colcù i .g-3canotti
.colcù i .g-3canotti
.colcù i .g-3canotti
.colcù i .g-3canotti

Contenituri

E classi supplementari aghjunte in Bootstrap v4.4 permettenu cuntenituri chì sò 100% largu finu à un puntu di rupture particulare. v5 aghjunghje un novu xxlbreakpoint.

.container
.container-sm
.container-md
.container-lg
.container-xl
.container-xxl
.container-fluidu