Classi di colonna e bootstrap breakpoints


Lezione 8 / 15

Classi di colonna e bootstrap breakpoints

Di Leo Sorge


bootstrap

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!

Scopri i corsi

Le nostre guide possono essere molto utili per muovere i primi passi nel mondo della programmazione, ma se vuoi iniziare una nuova carriera in ambito digital & tech con il supporto costante dei docenti e tantissime esercitazioni pratiche, ti consigliamo di frequentare uno dei corsi della nostra Hackademy!

Scopri i corsi