Conteneurs
Les conteneurs sont un élément fondamental de Bootstrap qui contient, remplit et aligne votre contenu dans un appareil ou une fenêtre d'affichage donné.
Comment ils travaillent
Les conteneurs sont l'élément de mise en page le plus basique dans Bootstrap et sont nécessaires lors de l'utilisation de notre système de grille par défaut . Les conteneurs sont utilisés pour contenir, remplir et (parfois) centrer le contenu qu'ils contiennent. Bien que les conteneurs puissent être imbriqués, la plupart des mises en page ne nécessitent pas de conteneur imbriqué.
Bootstrap est livré avec trois conteneurs différents :
.container
, qui définit unmax-width
à chaque point d'arrêt réactif.container-fluid
, qui estwidth: 100%
à tous les points d'arrêt.container-{breakpoint}
, c'est- à-direwidth: 100%
jusqu'au point d'arrêt spécifié
Le tableau ci-dessous illustre comment chaque conteneur se max-width
compare à l'original .container
et .container-fluid
à travers chaque point d'arrêt.
Voyez-les en action et comparez-les dans notre exemple Grid .
Très petit <576px |
Petit ≥576px |
Moyen ≥768px |
Grand ≥992px |
X-Grand ≥1200px |
XX-Grand ≥1400px |
|
---|---|---|---|---|---|---|
.container |
100% | 540px | 720px | 960px | 1140px | 1320px |
.container-sm |
100% | 540px | 720px | 960px | 1140px | 1320px |
.container-md |
100% | 100% | 720px | 960px | 1140px | 1320px |
.container-lg |
100% | 100% | 100% | 960px | 1140px | 1320px |
.container-xl |
100% | 100% | 100% | 100% | 1140px | 1320px |
.container-xxl |
100% | 100% | 100% | 100% | 100% | 1320px |
.container-fluid |
100% | 100% | 100% | 100% | 100% | 100% |
Conteneur par défaut
Notre .container
classe par défaut est un conteneur réactif à largeur fixe, c'est-à-dire ses max-width
modifications à chaque point d'arrêt.
<div class="container">
<!-- Content here -->
</div>
Conteneurs réactifs
Les conteneurs réactifs vous permettent de spécifier une classe large de 100 % jusqu'à ce que le point d'arrêt spécifié soit atteint, après quoi nous appliquons max-width
s pour chacun des points d'arrêt supérieurs. Par exemple, .container-sm
est large de 100 % pour commencer jusqu'à ce que le point d' sm
arrêt soit atteint, où il augmentera avec md
, lg
, xl
et xxl
.
<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>
Conteneurs de fluide
À utiliser .container-fluid
pour un conteneur pleine largeur, couvrant toute la largeur de la fenêtre.
<div class="container-fluid">
...
</div>
Toupet
Comme indiqué ci-dessus, Bootstrap génère une série de classes de conteneurs prédéfinies pour vous aider à créer les mises en page souhaitées. Vous pouvez personnaliser ces classes de conteneurs prédéfinies en modifiant la carte Sass (qui se trouve dans _variables.scss
) qui les alimente :
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1320px
);
En plus de personnaliser le Sass, vous pouvez également créer vos propres conteneurs avec notre mixin Sass.
// Source mixin
@mixin make-container($padding-x: $container-padding-x) {
width: 100%;
padding-right: $padding-x;
padding-left: $padding-x;
margin-right: auto;
margin-left: auto;
}
// Usage
.custom-container {
@include make-container();
}
Pour plus d'informations et d'exemples sur la façon de modifier nos cartes et variables Sass, veuillez vous référer à la section Sass de la documentation Grid .