Conteneurs
Les conteneurs centrent le contenu de la page et en limitent la largeur. Ils sont le point de départ de toute mise en page avec la grille.
Un conteneur fixe la largeur maximale du contenu, le centre horizontalement et ajoute un espace de chaque côté (la moitié de la gouttière, soit 0.75rem par côté). Placez-le autour d’une ou de plusieurs .row.
Cauri propose un conteneur à largeur par paliers, un conteneur toujours pleine largeur, et un conteneur pleine largeur jusqu’à un point de rupture choisi.
Conteneur par défaut#
Sa largeur maximale change à chaque point de rupture (540, 720, 960, 1 140 puis 1 320 px). En dessous de 576 px, il occupe toute la largeur.
<div class="container bg-body-secondary border py-3">
Contenu centré dans un conteneur à largeur par paliers.
</div>Conteneur pleine largeur#
.container-fluid occupe toujours 100 % de la largeur, à tous les points de rupture. Il convient aux tableaux de bord et aux barres de navigation.
<div class="container-fluid bg-body-secondary border py-3">
Contenu sur toute la largeur de la page.
</div>Conteneur adaptatif#
.container-{palier} reste pleine largeur jusqu’au palier indiqué, puis se comporte comme .container. Ici, la largeur reste totale en dessous de 768 px.
<div class="container-sm bg-body-secondary border py-2 mb-2">.container-sm : pleine largeur jusqu'à 576 px</div>
<div class="container-md bg-body-secondary border py-2 mb-2">.container-md : pleine largeur jusqu'à 768 px</div>
<div class="container-lg bg-body-secondary border py-2 mb-2">.container-lg : pleine largeur jusqu'à 992 px</div>
<div class="container-xl bg-body-secondary border py-2 mb-2">.container-xl : pleine largeur jusqu'à 1 200 px</div>
<div class="container-xxl bg-body-secondary border py-2">.container-xxl : pleine largeur jusqu'à 1 400 px</div>Largeur maximale de chaque conteneur
100 % signifie que le conteneur remplit la largeur disponible, moins ses marges intérieures.
| Classe | Moins de 576 px | 576 px et plus | 768 px et plus | 992 px et plus | 1 200 px et plus | 1 400 px et plus |
|---|---|---|---|---|---|---|
.container | 100 % | 540 px | 720 px | 960 px | 1 140 px | 1 320 px |
.container-sm | 100 % | 540 px | 720 px | 960 px | 1 140 px | 1 320 px |
.container-md | 100 % | 100 % | 720 px | 960 px | 1 140 px | 1 320 px |
.container-lg | 100 % | 100 % | 100 % | 960 px | 1 140 px | 1 320 px |
.container-xl | 100 % | 100 % | 100 % | 100 % | 1 140 px | 1 320 px |
.container-xxl | 100 % | 100 % | 100 % | 100 % | 100 % | 1 320 px |
.container-fluid | 100 % | 100 % | 100 % | 100 % | 100 % | 100 % |
Conteneur imbriqué dans une section pleine largeur#
Une pratique courante : une bande colorée sur toute la largeur de la page, avec le contenu centré à l’intérieur.
Ouvrez un compte épargne dès 10 000 FCFA.
<section class="bg-primary text-bg-primary py-4">
<div class="container">
<h3 class="h4">Épargnez pour vos projets</h3>
<p class="mb-0">Ouvrez un compte épargne dès 10 000 FCFA.</p>
</div>
</section>Ajuster les marges intérieures#
Le conteneur règle ses marges intérieures avec padding. Les utilitaires d’espacement les remplacent : px-0 les supprime, px-4 les agrandit. Voir Espacement.
<div class="container px-0 bg-body-secondary border py-2 mb-2">.container px-0 : aucune marge intérieure</div>
<div class="container px-5 bg-body-secondary border py-2">.container px-5 : marges intérieures agrandies</div>Variables Sass et CSS
| Nom | Valeur par défaut | Rôle |
|---|---|---|
$container-max-widths | sm: 540px, md: 720px, lg: 960px, xl: 1140px, xxl: 1320px | Largeur maximale du conteneur à chaque palier. |
$container-padding-x | $grid-gutter-width (1,5 rem) | Total des marges intérieures horizontales ; chaque côté reçoit la moitié. |
--bs-gutter-x | 1.5rem | Variable CSS portée par le conteneur : modifiez-la pour changer l’espace latéral d’un conteneur précis. |
Bonnes pratiques
À faire
- Utilisez un seul
.containerpar section de contenu et placez les.rowà l’intérieur. - Choisissez
.container-fluidpour les interfaces denses (tableaux, listes de virements). - Laissez les bandes de couleur sur toute la largeur et centrez seulement leur contenu.
À éviter
- N’imbriquez pas un conteneur dans un autre conteneur : les marges s’additionnent.
- Ne placez pas une
.rowdirectement dans lebodysans conteneur : ses marges négatives provoquent un défilement horizontal.
Accessibilité
- Une largeur de texte maîtrisée (environ 70 caractères par ligne) améliore la lecture ; ne forcez pas un texte long sur toute la largeur d’un grand écran.