Il bootstrap grid system (o sistema a griglia di Bootstrap) è un sistema di layout a 12 colonne (che compongono la cosiddetta riga) che consente di suddividere l’interfaccia utente in sezioni equamente distribuite.
Ogni riga, dunque, può contenere fino a 12 colonne, che a loro volta possono essere divise ulteriormente in colonne più piccole.
Per usare la griglia bisogna impiegare le classi di colonna .col-(numero) nell’elemento HTML. Spieghiamoci meglio:
per creare, ad esempio, una colonna che occupa metà della larghezza della riga, si utilizzerebbe la classe .col-6. È, inoltre, possibile specificare la larghezza delle colonne in base alle diverse dimensioni dello schermo usando classi come .col-sm-4 o .col-lg-8, che utilizzano i cosiddetti bootstrap breakpoints (ad esempio sm – lg – xl), vale a dire dei punti che rappresentano un numero di pixel allo scattare del quale la situazione del layout cambierà.
Il bootstrap grid system si avvale di una griglia che è progettata per essere flessibile e adattarsi a diverse dimensioni di schermo, il che la rende una scelta popolare per la creazione di siti web responsivi. Inoltre, Bootstrap framework fornisce anche classi predefinite per la creazione di righe, offset e allineamento delle colonne, che semplificano ulteriormente la creazione di un layout avanzato.
Per impostare la griglia si usa la class row.
Ecco il codice per creare una schermata con tre colonne.
<div class="container">
<div class="row">
<div class="col-sm-4">Colonna 1</div>
<div class="col-sm-4">Colonna 2</div>
<div class="col-sm-4">Colonna 3</div>
</div>
</div>
In questo esempio, ogni colonna avrà una larghezza di 4 su 12, quindi 1/3 della larghezza totale del contenitore. Il bootstrap grid system usa classi CSS come row e col-sm-4 per creare la griglia. Il prefisso sm è uno dei breakpoints di cui sopra e, nello specifico, indica che la griglia si adatterà ai dispositivi con larghezza superiore a 576px (punti).
