Classi di colonna e bootstrap breakpoints

Le classi di colonna in bootstrap

Come accennato nel capitolo precedente, le classi di colonna in Bootstrap sono utilizzate per creare un layout a griglia responsivo, in cui i contenuti vengono organizzati in righe e colonne.

Le classi di colonna sono indicate con il prefisso “col-“, seguito da un numero da 1 a 12, che indica la larghezza della colonna in base a un sistema a griglia a 12 colonne.
Ad esempio, “col-6” indica una colonna che occupa la metà della larghezza della riga, mentre “col-12” indica una colonna che occupa l’intera larghezza della riga.

Le classi di colonna possono anche essere combinate con le classi di offset, per creare spazi vuoti tra le colonne, o con le classi di push e pull, per spostare le colonne a destra o sinistra rispetto alla loro posizione originale nella griglia.

I bootstrap breakpoints

Nel capitolo precedente abbiamo citato anche i bootstrap breakpoints: si tratta di un’aggiunta alle classi di colonna.. Hai già visto i breakpoints nella prima definizione del bootstrap grid system, ma ora vediamo qualche dettaglio in più.

Nello specifico, abbiamo:

•   xs: <576px
•   sm: ≥576px
•   md: ≥768px
•   lg: ≥992px
•   xl: ≥1200px
•   Xxl: ≥1400px

Ogni classe di colonna è seguita da un numero che rappresenta il numero di colonne che verranno usate su una singola riga. Ad esempio, .col-6 significa che la larghezza della colonna sarà pari a metà della larghezza della riga e, orientandoti coi breakpoints prestabiliti, sarai in grado di far cambiare il tuo layout come meglio chiedi a seconda delle dimensioni dello schermo!