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:
- Container fisso: ha una larghezza fissa e viene usato per creare layout con margini fissi.
- Container fluido: ha una larghezza flessibile e si adatta alla larghezza della finestra del browser.
- 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!
