Bootstrap container: cosa sono e come funzionano

In Bootstrap, un container è un elemento HTML che funge da contenitore per il contenuto della tua pagina. I container possono essere impiegati per definire un margine e un allineamento per il contenuto all’interno di essi.

Bootstrap framework offre tre tipi di container:

1. Container fisso: ha una larghezza fissa e viene usato per creare layout con margini fissi.
2. Container fluido: ha una larghezza flessibile e si adatta alla larghezza della finestra del browser.
3. Container a griglia: usa il Bootstrap grid system per creare layout complessi con colonne e righe.

In generale, si consiglia di usare il container fluido per la maggior parte delle pagine web ma, a volte, può essere utile usare un container fisso o a griglia per specifici casi d’uso.

Come primo esempio prendiamo la seguente linea di codice:

<div class="container p-3 my-3 border rounded shadow-lg">

Questa linea di codice crea un elemento HTML di tipo “div” (ricordi cos’è un div?)  che impiega la classe “container” di Bootstrap, insieme a tre altre classi: “p-3”, “my-3” e le classi “border rounded shadow-lg”.

• La classe “container” definisce un contenitore per il contenuto del sito web, che viene centrato orizzontalmente e con una larghezza massima predefinita. Questo aiuta a mantenere un layout coerente e a evitare che il contenuto esca dai bordi della pagina.
• La classe “p-3” definisce un padding (spazio vuoto) di 3 unità all’interno del contenitore. Questo crea un po’ di spazio vuoto attorno al contenuto per renderlo più leggibile.
• La classe “my-3” definisce un margine (spazio vuoto esterno) di 3 unità per il contenitore. Questo crea un po’ di spazio vuoto attorno al contenitore per separarlo dai contenuti adiacenti.
• Le classi “border rounded shadow-lg” definisce un bordo, angoli arrotondati e un’ombra di grandi dimensioni per il contenitore. Questo fornisce un effetto visivo accattivante e aumenta la leggibilità del contenuto.

Se alcuni termini ti disorientano, puoi rinfrescarti la memoria con la nostra guida all’html e css in italiano e poi tornare su queste pagine!