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!
