The Bootstrap grid-system offers a simple and powerful way to create responsive layouts and therefore suitable for all shapes and sizes.

1. Bootstrap 5: grid system
ELEONORA ROCCHI
- 2022 -

2. Il grid-system di Bootstrap offre un modo
semplice e potente per creare layout responsive
e quindi adatti a tutte le forme e dimensioni.
https://getbootstrap.com/docs/5.2/layout/grid
ER 2022

3. Grid-system
Insieme di regole CSS utili a gestire la disposizione di contenuti in una pagina.
Di fatto suddivide il contenitore in più colonne
con dimensioni e spazi coerenti tra loro.
ER 2022

4. Si basa su
f
lexbox
(CSS Flexible Box Layout)
• Il layout si adatta in modo
f
lessibile al display utilizzato (Responsive Design).
• Lo spazio viene riempito o gli elementi vengono accostati tra loro in modo
che tutto sia ordinato
• Lavora con due assi: il principale in senso orizzontale, il trasversale in senso
verticale.
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox
ER 2022

5. Utilizza un sistema a dodici colonne per riga
e sei livelli reattivi prede
f
initi (breakpoint).
ER 2022

6. x-small (xs) small (sm) medium (md) large (lg) x-large (xl) xx-large (xxl)
max-width del
contenuto
auto 540px 720px 960px 1140px 1320px
Pre
f
isso della
classe
.col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
Caratteristiche del grid-system
ER 2022

7. L'applicazione di una classe .col-sm-* a un elemento avrà
effetto sui dispositivi piccoli, ma anche su dispositivi
medi, grandi ed extra grandi se non sono presenti le
speci
f
iche classi .col-md-* .col-lg-*, .col-xl-*, or .col-xxl-*
ER 2022

8. ➡ Si crea un contenitore che funge da wrapper usando una
classe contenitore come .container
➡ Si creano righe all'interno del contenitore usando la
classe .row
➡ Si creano colonne all'interno di qualsiasi riga usando le
classi.col-*, .col-sm-*, .col-md-*, .col-lg-*, .col-xl-* e .col-xxl-*
ER 2022
Come creare righe e colonne

9. Esempio layout due-colonne
L’esempio mostra come creare due layout di colonna per
dispositivi medi, grandi ed extra large (tablet, laptop, etc).
Sui telefoni cellulari (larghezza dello schermo inferiore a
768px), le colonne verranno “mandate a capo”
automaticamente, suddividendosi in sue righe da 1
colonna
ER 2022

10. ER 2022

11. Il contenuto poi deve essere posizionato
all'interno delle colonne (.col e .col-*) e solo le
colonne possono essere
f
iglie immediate
delle righe (.row).
ER 2022

12. La larghezza delle colonne della griglia è impostata in
percentuale, quindi le colonne sono sempre
f
luide e
dimensionate rispetto all'elemento padre.
Ogni colonna ha un riempimento orizzontale (chiamato
gutter) per controllare lo spazio tra le singole colonne.
ER 2022

13. Per mantenere le colonne in una riga (cioè
af
f
iancate), la somma dei numeri delle
colonne della griglia all'interno di una singola
riga non deve essere maggiore di 12.
ER 2022

14. Esempio auto-layout
Si possono anche creare colonne di uguale
larghezza per tutti i dispositivi (x-small, small,
medium, large, x-large e xx-large) usando la
classe .col, senza speci
f
icare alcun numero di
colonna.
ER 2022

15. ER 2022

16. Esempio auto-layout
Si può in alternativa impostare la larghezza di
una colonna e lasciare che le colonne di pari
livello si ridimensionino automaticamente
attorno ad essa allo stesso modo.
ER 2022

17. ER 2022

18. Esempio di layout più
f
lessible
Si possono creare layout più
f
lessibili che cambiano l'orientamento
delle colonne in base alle dimensioni della
f
inestra.
L'esempio seguente creerà un layout a tre colonne su dispositivi di
grandi dimensioni come laptop e desktop, nonché su tablet (ad es.
Apple iPad) in modalità orizzontale, ma su dispositivi medi come
tablet in modalità verticale (768 px ≤ larghezza dello schermo < 992
px), esso cambierà in un layout a due colonne in cui la terza colonna
si sposta in fondo alle prime due colonne.
ER 2022

19. ER 2022

20. La somma della griglia media (cioè col-md-*) è
3 + 9 + 12 = 24 > 12
Il terzo elemento .col-md- 12 sta aggiungendo una
colonna etra che sfora le 12 di base della griglia: nei
dispositivi di media dimensione tale colonna viene
reinterpretata in una nuova riga.
ER 2022

21. Esempio colonne a larghezza variabile
Si può utilizzare la classi col-{breakpoint}-
auto per ridimensionare una colonna in base
alla larghezza naturale del contenuto.
ER 2022

22. ER 2022

23. Allineamento colonne
È possibile utilizzare le utilità di allineamento
di
f
lexbox per allineare verticalmente e
orizzontalmente le colonne della griglia
all'interno di un contenitore.
ER 2022

24. Si possono utilizzare le classi .align-items-start,
.align-items-center e .align-items-end per
allineare le colonne della griglia verticalmente
rispettivamente nella parte superiore, centrale
e inferiore di un contenitore
ER 2022

25. ER 2022

26. Anche le singole colonne all'interno di una
riga possono essere allineate verticalmente
ER 2022

27. ER 2022

28. Allo stesso modo si possono usare
.justify-content-start, .justify-content-center,
e .justify-content-end
per allineare le colonne della griglia
orizzontalmente
ER 2022

29. Si può usare la classe .justify-content-around
per distribuire uniformemente le colonne della griglia con
spazi di dimensioni proporzionate su entrambe le estremità.
Si può usare la classe .justify-content-between per distribuire
uniformemente le colonne della griglia dove è stata
posizionata la prima colonna all'inizio e l'ultima alla
f
ine.
ER 2022