Bootstrap container: cosa sono e come funzionano


Lezione 6 / 15

Bootstrap container: cosa sono e come funzionano

Di Leo Sorge


bootstrap

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! 

Scopri i corsi

Le nostre guide possono essere molto utili per muovere i primi passi nel mondo della programmazione, ma se vuoi iniziare una nuova carriera in ambito digital & tech con il supporto costante dei docenti e tantissime esercitazioni pratiche, ti consigliamo di frequentare uno dei corsi della nostra Hackademy!

Scopri i corsi