Esempio di griglia a una colonna

1 di 1 colonna

Esempio di griglia a due colonne

1 di 2 colonne

2 di 2 colonne

Esempio di griglia a tre colonne

1 di 3 colonne

2 di 3 colonne

3 di 3 colonne

Esempio di griglia a quattro colonne

1 di 4 colonne

2 di 4 colonne

3 di 4 colonne

4 di 4 colonne

Gli esempi riportati creano colonne di uguale larghezza su dispositivi piccoli, medi, grandi e extra large usando le classi di griglia predefinite. Le colonne sono centrate nella pagina attraverso l'utilizzo dell'elemento genitore e obbligatorio avente classe container

In generale:

• i contenitori forniscono un mezzo per centrare e riempire orizzontalmente il contenuto del tuo sito. Utilizza l'elemento <div class="container"> per una larghezza al pixel responsive o <div class="container-fluid"> per una larghezza del width: 100% su tutti i viewport e dimensioni dei device
• le righe sono involucri per colonne. Ogni colonna ha una spaziatura orizzontale, denominata gutter per regolare lo spazio tra di esse. Questo padding viene poi neutralizzato dalle righe con margini negativi. In questo modo, tutto il contenuto nelle colonne viene allineato sul lato sinistro
• in un layout a griglia, il contenuto deve essere posizionato all'interno di colonne e solo le colonne possono essere figlie dirette delle righe
• grazie a flexbox, le colonne della griglia senza uno specifico width verranno automaticamente impostate come colonne di uguale larghezza. Per esempio, quattro casi di <div class="col-sm"> avranno automaticamente una larghezza del 25% dal più piccolo breakpoint in su
• guarda la sezione colonne a disposizione automatica per maggiori informazioni
• le classi delle colonne indicano il numero delle colonne che dovresti utilizzare in base alle 12 possibili per riga. Quindi, se desideri tre colonne di uguale larghezza, puoi usare <div class="col-4">
• le width delle colonne sono stabilite in percentuale, quindi sono sempre fluide e dimensionate rispetto al loro elemento genitore
• le colonne hanno un padding orizzontale per creare il gutter tra le singole colonne. Per rimuovere il margin dalle righe e il padding dalle colonne aggiungendo la classe <div class="no-gutters"> alla classe .row
• per renderla responsive, esistono cinque breakpoint della griglia, uno per ogni responsive breakpoint: tutti i breakpoint (extra small), small, medium, large, and extra large (vedi tabella in basso)
• i breakpoint della griglia si basano su media query con larghezza minima, significa che si applicano a quel breakpoint e a tutti quelli sopra di esso (e.g., .col-sm-4 si applica a device piccoli, medi, grandi e extra large, ma non al primo breakpoint xs)

Per approfondire l'uso delle griglie visita la pagina Grid System di Bootstrap.