Bootstrap Grid System (Sistema a Griglia) e Container

Conoscere il funzionamento del Grid System (sistema a griglie) dei container (contenitori) in Bootstrap è fondamentale se si vogliono creare correttamente layout responsive che si adattano dinamicamente alle dimensioni del dispositivo.

Il Grid System ti permette di creare layout complessi scrivendo poco codice. Ma, per lavorare con la griglia devi innanzitutto saper padroneggiare tre semplici componenti: contenitori, righe e colonne.

In questa parte del tutorial vedremo principalmente come funzionano i contenitori. Impareremo insieme a conoscerli e ad usarli all’interno delle nostre pagine web.

Nell’articolo successivo parleremo delle righe e delle colonne ed entreremo nel vivo del Grid System di Bootstrap. Vedremo come usare questi due componenti all’interno di un container per realizzare layout reattivi che si adattano dinamicamente alle dimensioni della finestra del browser e alle dimensioni dello schermo del dispositivo.

Quindi, senza perdere altro tempo, mettiamoci subito all’opera.

Bootstrap Container

Il contenitore, o “container”, in Bootstrap è uno degli elementi fondamentali. Esso viene creato attraverso la classe container in questo modo:

<div class="container">
  <!-- Content here -->
</div>

In realtà è possibile creare due tipi di container. Uno di larghezza fissa, la cui dimensione cambia in base alla dimensione del viewport (la dimensione della finestra del browser) e uno fluid che invece occupa il 100% della larghezza.

Per creare un container fluid devi usare la classe container-fluid in questo modo:

<div class="container-fluid">
  ...
</div>

Come vedremo più avanti, quando parleremo delle righe, delle colonne e del grid system, per definire il comportamento dei propri componenti in base alle dimensioni del viewport, Bootstrap fa uso di breakpoint definiti da alcune media query.

Questi breakpoint sono principalmente aggiunti come suffisso in alcune classi, usate per creare determinati componenti, e si attivano in base alle dimensioni del dispositivo. In particolare sono:

• xs è il suffisso per dispositivi extra small le cui dimensioni sono minori a 576px. (Smartphone con visualizzazione verticale – portrait).
• sm per indicare dispositivi small le cui dimensioni sono maggiori o uguali a 576px ma minore di 768px. (Smartphone con visualizzazione orizzontale – landscape).
• md per indicare dispositivi medium le cui dimensioni sono maggiori o uguali a 768px ma minore di 992px. (Tablet).
• lg per indicare dispositivi large le cui dimensione sono maggiori o uguali a 992px ma minore di 1200px. (Laptop).
• xl dispositivi extra large le cui dimensioni sono maggiori o uguali a 1200px. (Laptop e desktop).

Nel prossimo articolo ti mostrerò come usare questi suffissi.

Per ora devi solo sapere che anche le dimensioni del contenitore non fluid dipendono da questi valori. In particolare, la larghezza massima (max-width) del container dipenderà dalla larghezza della finestra del browser(viewport) e assumerà i seguenti valori:

Un esempio sicuramente ti aiuterà a capire meglio. Con il seguente codice creiamo due container uno fluid e l’altro no.

<div class="container bg-primary text-white my-3" style="height: 30px;"> Container classico</div>
<div class="container-fluid bg-warning text-dark my-3" style="height: 30px;">Container fluid</div>

Inseriscilo all’interno della tua pagina HTML e ridimensiona la finestra per vedere il comportamento dei due container.

Bootstrap grid system – Responsive Containers

Con Bootstrap v4.4 sono stati introdotti anche i contenitori responsive. Cioè contenitori la cui larghezza è del 100% fin quando non raggiungono le dimensioni del breakpoint specificato nel suffisso. Dopodiché seguono le regole viste poco sopra.

Un esempio ti aiuterà a comprendere quanto appena detto:

<div class="container-sm bg-primary text-white my-3">La larghezza del container-sm sarà del 100% fin quando non raggiunge il breakpoint small</div>
<div class="container-md bg-success text-white my-3">La larghezza del container-md sarà del 100% fin quando non raggiunge il breakpoint medium</div>
<div class="container-lg bg-dark text-white my-3">La larghezza del container-lg sarà del 100% fin quando non raggiunge il breakpoint large</div>
<div class="container-xl bg-warning text-dark">La larghezza del container-xl sarà del 100% fin quando non raggiunge il breakpoint extra large</div>

N.B. Le classi bg- e text- le ho usate per colorare lo sfondo e il testo del contenitore. Per avere maggiori informazioni sull’uso delle classi con i colori predefiniti da bootstrap puoi consultare questa pagina.

Ora che hai le idee più chiare su l’uso delle classi container e container-fluid, le possiamo usare per creare contenitori all’interno dei quali inserire righe e colonne e sfruttare il Grid System di Bootstrap per creare il nostro layout responsive.

Nel prossimo articolo continueremo a parlare appunto del sistema a griglia e delle classi row e col, usate per realizzare rispettivamente righe e colonne

Per qualsiasi informazione o chiarimento non esitare a contattarci attraverso la nostra pagina Facebook o via email.

Articolo successivo -> Bootstrap Grid System – righe e colonne

Come scaricare ed installare Bootstrap <- Articolo precedente