Comment ils travaillent

Les conteneurs sont l'élément de mise en page le plus basique dans Bootstrap et sont requis 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 peuvent ê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 une max-width à chaque point d'arrêt réactif
• .container-fluid, qui est width : 100 % à tous les points d'arrêt
• .container-{breakpoint}, qui est width : 100 % jusqu'au point d'arrêt spécifié

Le tableau ci-dessous illustre la façon dont la max-width de chaque conteneur se compare aux .container et .container-fluid d'origine pour chaque point d'arrêt. .

Regardez-les en action et comparez-les dans notre exemple de grille.

Conteneur par défaut

Notre classe .container par défaut est un conteneur réactif à largeur fixe, ce qui signifie que sa max-width change à 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 des valeurs max-width 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'arrêt sm soit atteint, où il évoluera avec md, < code>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 fluides

Utilisez .container-fluid pour un conteneur pleine largeur, couvrant toute la largeur de la fenêtre.

<div class="container-fluid">
  ...
</div>

Sass

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 conteneur 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 .