Esempi di griglia Bootstrap

Layout di griglia di base per familiarizzare con la costruzione all'interno del sistema di griglia Bootstrap.

In questi esempi la .themed-grid-colclasse viene aggiunta alle colonne per aggiungere alcuni temi. Questa non è una classe disponibile in Bootstrap per impostazione predefinita.

Cinque livelli di griglia

Ci sono cinque livelli per il sistema di griglia Bootstrap, uno per ogni gamma di dispositivi che supportiamo. Ogni livello inizia con una dimensione minima della finestra e si applica automaticamente ai dispositivi più grandi a meno che non venga sovrascritto.

.col-4

.col-sm-4

.col-md-4

.col-lg-4

.col-xl-4

.col-xxl-4

Tre colonne uguali

Ottieni tre colonne di uguale larghezza a partire dai desktop e scalabili su desktop di grandi dimensioni . Su dispositivi mobili, tablet e versioni precedenti, le colonne verranno impilate automaticamente.

.col-md-4

Alternativa a tre colonne uguali

Utilizzando le .row-cols-*classi, puoi facilmente creare una griglia con colonne uguali.

.colfiglio di .row-cols-md-3

Tre colonne disuguali

Ottieni tre colonne a partire dai desktop e scalando su desktop di grandi dimensioni di varie larghezze. Ricorda, le colonne della griglia dovrebbero sommare fino a dodici per un singolo blocco orizzontale. Più di questo, e le colonne iniziano a impilarsi indipendentemente dal viewport.

.col-md-3

.col-md-6

.col-md-3

Due colonne

Ottieni due colonne a partire dai desktop e scalabile su desktop di grandi dimensioni .

.col-md-8

.col-md-4

Larghezza intera, colonna singola

Non sono necessarie classi di griglia per elementi a larghezza intera.

Due colonne con due colonne nidificate

Secondo la documentazione, l'annidamento è semplice: basta inserire una riga di colonne all'interno di una colonna esistente. Questo ti dà due colonne che iniziano su desktop e scalano a desktop di grandi dimensioni , con altre due (larghezze uguali) all'interno della colonna più grande.

A dimensioni di dispositivi mobili, tablet e versioni precedenti, queste colonne e le relative colonne nidificate verranno impilate.

.col-md-8

.col-md-6

.col-md-4

Misti: mobile e desktop

Il sistema di griglia Bootstrap v5 ha sei livelli di classi: xs (extra small, questa classe infix non viene utilizzata), sm (small), md (medium), lg (large), xl (x-large) e xxl (xx -di grandi dimensioni). Puoi utilizzare quasi tutte le combinazioni di queste classi per creare layout più dinamici e flessibili.

Ogni livello di classi aumenta, il che significa che se prevedi di impostare le stesse larghezze per md, lg, xl e xxl, devi solo specificare md.

.col-md-8

.col-6 .col-md-4

.col-6

Misti: mobile, tablet e desktop

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

.col-6 .col-lg-4

.col-6 .col-sm-4

grondaie

Con .gx-*le classi, le grondaie orizzontali possono essere regolate.

.colcon .gx-4grondaie

Usa le .gy-*classi per controllare le grondaie verticali.

.colcon .gy-4grondaie

Con .g-*le classi, le grondaie in entrambe le direzioni possono essere regolate.

.colcon .g-3grondaie

Contenitori

Le classi aggiuntive aggiunte in Bootstrap v4.4 consentono contenitori larghi il 100% fino a un particolare punto di interruzione. v5 aggiunge un nuovo punto di xxlinterruzione.

.contenitore

.contenitore-sm

.container-md

.container-lg

.container-xl

.container-xxl

.contenitore-fluido