Conteneurs Bootstrap 4
Conteneurs
Vous avez appris du chapitre précédent que Bootstrap nécessite un élément contenant pour envelopper le contenu du site.
Les conteneurs sont utilisés pour remplir le contenu à l'intérieur de ceux-ci, et il existe deux classes de conteneurs disponibles :
- La
.containerclasse fournit un conteneur réactif à largeur fixe - La
.container-fluidclasse fournit un conteneur pleine largeur , couvrant toute la largeur de la fenêtre d'affichage
Conteneur fixe
Utilisez la .containerclasse pour créer un conteneur réactif à largeur fixe.
Notez que sa largeur ( max-width) changera selon les différentes tailles d'écran :
|
Très petit <576px |
Petit ≥576px |
Moyen ≥768px |
Grand ≥992px |
Très grand ≥1200px |
|
|---|---|---|---|---|---|
| largeur maximale | 100% | 540px | 720px | 960px | 1140px |
Ouvrez l'exemple ci-dessous et redimensionnez la fenêtre du navigateur pour voir que la largeur du conteneur changera à différents points d'arrêt :
Exemple
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
Conteneur de fluide
Utilisez la .container-fluidclasse pour créer un conteneur pleine largeur, qui couvrira toujours toute la largeur de l'écran ( widthest toujours 100%):
Exemple
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
Rembourrage du conteneur
Par défaut, les conteneurs ont un rembourrage gauche et droit de 15 pixels, sans rembourrage supérieur ou inférieur. Par conséquent, nous utilisons souvent des utilitaires d'espacement , tels qu'un rembourrage et des marges supplémentaires pour les rendre encore plus beaux. Par exemple, .pt-3signifie "ajouter un rembourrage supérieur de 16px":
Exemple
<div class="container pt-3"></div>
Vous en apprendrez beaucoup plus sur les utilitaires d'espacement dans notre chapitre BS4 Utilities .
Bordure et couleur du conteneur
D'autres utilitaires, tels que les bordures et les couleurs, sont également souvent utilisés avec les conteneurs :
Exemple
Ma première page Bootstrap
Ce conteneur a une bordure et un rembourrage et des marges supplémentaires.
Ma première page Bootstrap
Ce conteneur a une couleur d'arrière-plan sombre et un texte blanc, ainsi que des remplissages et des marges supplémentaires.
Ma première page Bootstrap
Ce conteneur a une couleur d'arrière-plan bleue et un texte blanc, ainsi que des remplissages et des marges supplémentaires.
<div class="container p-3 my-3 border"></div>
<div class="container
p-3 my-3 bg-dark
text-white"></div>
<div class="container p-3 my-3 bg-primary
text-white"></div>
Vous en apprendrez beaucoup plus sur les couleurs et les utilitaires de bordure dans nos chapitres BS4 Colors et BS4 Utilities .
Conteneurs réactifs
Vous pouvez également utiliser les .container-sm|md|lg|xlclasses pour créer des conteneurs réactifs.
Le max-widthconteneur changera sur différentes tailles d'écran/fenêtres :
| Classer |
Très petit <576px |
Petit ≥576px |
Moyen ≥768px |
Grand ≥992px |
Très grand ≥1200px |
|---|---|---|---|---|---|
.container-sm |
100% | 540px | 720px | 960px | 1140px |
.container-md |
100% | 100% | 720px | 960px | 1140px |
.container-lg |
100% | 100% | 100% | 960px | 1140px |
.container-xl |
100% | 100% | 100% | 100% | 1140px |
Exemple
<div class="container-sm">.container-sm</div>
<div
class="container-md">.container-md</div>
<div
class="container-lg">.container-lg</div>
<div
class="container-xl">.container-xl</div>
Saviez-vous?
W3.CSS est une excellente alternative à Bootstrap 4.
W3.CSS est plus petit, plus rapide et plus facile à utiliser.
Si vous souhaitez apprendre W3.CSS, accédez à notre didacticiel W3.CSS .