Bootstrap 5 est la dernière version du framework bootstrap qui permet à ses utilisateurs de créer des sites Web réactifs avec une approche mobile. Bootstrap 5 a de nombreuses fonctionnalités distinctives telles qu'elle a des feuilles de style rapide et une réactivité améliorée. Une nécessité de base de ce cadre est un conteneur pour envelopper les éléments apparaissant sur un site Web. Un conteneur est la disposition la plus fondamentale de Bootstrap 5 dont nous discuterons en profondeur dans cet article.

Commençons.

Que sont les conteneurs

Comme déjà mentionné, les conteneurs sont considérés comme la disposition la plus fondamentale de Bootstrap 5. Ces entités enveloppent des éléments à l'intérieur avec certains rembourrage et marge. De plus, ceux-ci sont essentiels pour construire une disposition de grille.

Il existe un total de trois types de conteneurs dans Bootstrap 5 que nous avons enrôlés ci-dessous.

1. Conteneurs avec largeur fixe
2. Conteneurs avec pleine largeur
3. Conteneurs avec des points de rupture réactifs

Discutons d'eux en détail.

Conteneurs avec largeur fixe

Vous pouvez créer un conteneur réactif avec une largeur fixe en utilisant le .classe de conteneurs. Cette largeur changera en fonction du type d'appareil et de la taille de l'écran. Explorons maintenant ce type de conteneur avec un exemple.

Exemple

Ici, nous emballons du contenu à l'aide du conteneur avec une largeur fixe.

Html

Ici, nous sommes tout d'abord, y compris Bootstrap 5 en ajoutant CDN pour CSS, et JavaScript dans la balise de notre fichier HTML.

Html

Bonjour le monde

Bootstrap 5 est incroyable.

Nous apprenons des types de conteneurs en bootstrap 5.

Ceci est une démonstration du conteneur à largeur fixe qui utilise le .classe de conteneurs.

Maintenant, nous créons un conteneur div et lui avons attribué le conteneur de classe. Ensuite, nous en avons imbriqué

, et trois

éléments dans ce conteneur div.

Sortir

Nous allons afficher la sortie à des tailles d'écran aléatoires. Par exemple, la sortie à 699px et au-dessus est indiquée ci-dessous.

À 351px et moins.

Le .récipient La classe a été mise en œuvre avec succès.

Conteneurs avec pleine largeur

Aux fins de la création de conteneurs en pleine largeur .conteneur-fluide classe. La largeur du conteneur sera à 100% quelle que soit la taille de l'écran. L'exemple présenté ci-dessous montre un conteneur pleine largeur.

Html

Bonjour le monde

Bootstrap 5 est incroyable.

Nous apprenons des types de conteneurs en bootstrap 5.

Ceci est une démonstration du conteneur à largeur fixe qui utilise .classe de conteneurs.

Ici nous utilisons .Classe de conteneurs-fluide pour créer un élément div et nicher une rubrique, et quelques paragraphes à l'intérieur de cette div.

Sortir

Nous allons afficher la sortie à des tailles d'écran aléatoires. La première sortie est pour la largeur d'écran 700px et au-dessus.

À 355px et en dessous.

Le .conteneur-fluide La classe fonctionne correctement.

Conteneurs avec des points de rupture réactifs

Vous pouvez également créer des conteneurs qui conserveront une largeur de 100% jusqu'à ce qu'un point d'arrêt soit spécifié. Cela signifie que la largeur commencera à changer après ce point d'arrêt particulier. Pour une meilleure compréhension, nous avons démontré un exemple ici.

Exemple

Ici, nous avons démontré tous les points d'arrêt mentionnés ci-dessus.

Vous pouvez également créer des conteneurs qui conserveront une largeur de 100% jusqu'à ce qu'un point d'arrêt soit spécifié. Cela signifie que la largeur commencera à changer après ce point d'arrêt particulier. Pour une meilleure compréhension, nous avons démontré un exemple ici.
Exemple
Ici, nous avons démontré tous les points d'arrêt mentionnés ci-dessus.
[cce_html width = "100%" height = "100%" échappé = "true" thème = "Blackboard" Nowrap = "0"]
Petit
Moyen
Grand
Extra large
Extra Extra Large

Dans le code ci-dessus, nous avons créé cinq conteneurs Div et chacun a été attribué une classe particulière correspondant à un point d'arrêt spécifique.

Sortir

Les points d'arrêt ont été mis en œuvre avec succès.

Note: Visitez le site officiel de Bootstrap 5 pour consulter les largeurs de divers conteneurs dans Bootstrap 5 sur certains points d'arrêt.

Conclusion

Les conteneurs sont considérés comme la disposition la plus fondamentale de Bootstrap 5 qui sont utilisées pour envelopper des éléments à l'intérieur d'eux avec certains rembourrage et marge. De plus, ceux-ci sont essentiels pour construire une disposition de grille. Il existe un total de trois types de conteneurs qui sont; conteneurs avec largeur fixe, conteneurs avec pleine largeur et conteneur avec des points d'arrêt réactifs. Il existe certaines classes intégrées associées à ces conteneurs. Tous ces types de conteneurs sont expliqués dans l'article avec des exemples appropriés.