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 à i 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-sm-4

.col-md-4

.col-lg-4

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

Alternativa di trè colonne uguali

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

.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ù dui culonni nidificati

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 u dispositivu mobile, tablette è giù, sti culonni è e so culonne nidificate si stack.

.col-md-8

.col-md-6

.col-md-4

Mixed: mobile è desktop

U sistema di griglia Bootstrap v5 hà sei livelli di classi: xs (extra small, sta class infix ùn hè micca utilizata), sm (picculu), md (medium), lg (grande), xl (x-large) è xxl (xx). - grande). 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 è xxl, avete bisognu di specificà md.

.col-md-8

.col-6 .col-md-4

.col-6

Mistu: mobile, tableta è desktop

.col-sm-6 .col-lg-8

.col-6 .col-lg-4

.col-6 .col-sm-4

Gouttières

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

.colcù i .gx-4canotti

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

.colcù i .gy-4canotti

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

.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