Bootstrap 5 è ​​l'ultima versione del framework Bootstrap che consente ai suoi utenti di creare siti Web reattivi con un approccio mobile-first. Bootstrap 5 ha molte caratteristiche distintive come ha fogli di stile rapidi e maggiore reattività. Una necessità di base di questo framework è un contenitore per avvolgere gli elementi che appaiono su un sito Web. Un contenitore è il layout più fondamentale di Bootstrap 5 di cui discuteremo in questo articolo.

Cominciamo.

Cosa sono i contenitori

Come già accennato, i contenitori sono considerati il ​​layout più fondamentale di Bootstrap 5. Queste entità avvolgono elementi al suo interno insieme a determinati imbottitura e margine. Inoltre, questi sono essenziali per costruire un layout della griglia.

Ci sono un totale di tre tipi di container in Bootstrap 5 che abbiamo arruolato di seguito.

1. Contenitori con larghezza fissa
2. Contenitori con larghezza completa
3. Contenitori con punti di interruzione reattivi

Discutiamo in dettaglio loro.

Contenitori con larghezza fissa

È possibile creare un contenitore reattivo con larghezza fissa usando il .Classe di container. Questa larghezza cambierà a seconda del tipo di dispositivo e della dimensione dello schermo. Ora esploriamo questo tipo di contenitore con un esempio.

Esempio

Qui stiamo avvolgendo alcuni contenuti usando il contenitore con larghezza fissa.

Html

Qui siamo prima di tutto includendo Bootstrap 5 aggiungendo CDN per CSS e JavaScript nel tag del nostro file HTML.

Html

Ciao mondo

Bootstrap 5 è ​​fantastico.

Stiamo imparando tipi di contenitori in bootstrap 5.

Questa è una dimostrazione del contenitore a larghezza fissa che utilizza il .Classe di container.

Ora stiamo creando un contenitore di div e lo assegniamo il contenitore di classe. Quindi ne abbiamo nidificato uno

, e tre

elementi in quel contenitore di div.

Produzione

Mostreremo l'output a dimensioni dello schermo casuale. Ad esempio, l'output a 699px e oltre è mostrato di seguito.

A 351px e meno.

IL .contenitore La classe è stata implementata con successo.

Contenitori con larghezza completa

Allo scopo di creare contenitori con larghezza completa, utilizzare il .Container-Fluid classe. La larghezza del contenitore sarà al 100%, indipendentemente dalla dimensione dello schermo. L'esempio presentato di seguito dimostra un contenitore a tutta larga.

Html

Ciao mondo

Bootstrap 5 è ​​fantastico.

Stiamo imparando tipi di contenitori in bootstrap 5.

Questa è una dimostrazione del contenitore a larghezza fissa che usa .Classe di container.

Qui stiamo usando .Classe del contenitore-fluido per creare un elemento div e nidificare un'intestazione e alcuni paragrafi all'interno di quel div.

Produzione

Mostreremo l'output a dimensioni dello schermo casuale. Il primo output è per la larghezza dello schermo 700px e sopra.

A 355px e sotto.

IL .Container-Fluid La classe funziona correttamente.

Contenitori con punti di interruzione reattivi

È inoltre possibile creare contenitori che manterranno la larghezza del 100% fino a quando non verrà specificato un punto di interruzione. Ciò significa che la larghezza inizierà a cambiare dopo quel particolare punto di interruzione. Per una migliore comprensione abbiamo dimostrato un esempio qui.

Esempio

Qui abbiamo dimostrato tutti i punti di interruzione sopra menzionati.

È inoltre possibile creare contenitori che manterranno la larghezza del 100% fino a quando non verrà specificato un punto di interruzione. Ciò significa che la larghezza inizierà a cambiare dopo quel particolare punto di interruzione. Per una migliore comprensione abbiamo dimostrato un esempio qui.
Esempio
Qui abbiamo dimostrato tutti i punti di interruzione sopra menzionati.
[CCE_HTML width = "100%" altezza = "100%" sfuggito = "vero" tema = "blackboard" nowRap = "0"]
Piccolo
medio
Grande
Extra grande
Extra extra grande

Nel codice sopra, abbiamo creato cinque contenitori Div e a ciascuno è stata assegnata una particolare classe corrispondente a un punto di interruzione specifico.

Produzione

I punti di interruzione sono stati implementati con successo.

Nota: Visita il sito Web ufficiale di Bootstrap 5 per controllare le larghezze di vari container in Bootstrap 5 in alcuni punti di interruzione.

Conclusione

I contenitori sono considerati il ​​layout più fondamentale di Bootstrap 5 che vengono utilizzati per avvolgere elementi al suo interno insieme a determinati imbottiture e margine. Inoltre, questi sono essenziali per costruire un layout della griglia. Esistono un totale di tre tipi di container che sono; Contenitori con larghezza fissa, contenitori con larghezza completa e contenitore con breakpoint reattivi. Ci sono alcune classi integrate che sono associate a questi contenitori. Tutti questi tipi di contenitori sono spiegati nell'articolo insieme a esempi adeguati.