Conteneurs

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 un max-widthà chaque point d'arrêt réactif
• .container-fluid, qui est width: 100%à tous les points d'arrêt
• .container-{breakpoint}, c'est- à-dire width: 100%jusqu'au point d'arrêt spécifié

Le tableau ci-dessous illustre comment chaque conteneur se max-widthcompare à l'original .containeret .container-fluidà travers chaque point d'arrêt.

Voyez-les en action et comparez-les dans notre exemple Grid .

Conteneur par défaut

Notre .containerclasse par défaut est un conteneur réactif à largeur fixe, c'est-à-dire ses max-widthmodifications à 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-widths pour chacun des points d'arrêt supérieurs. Par exemple, .container-smest large de 100 % pour commencer jusqu'à ce que le point d' smarrêt soit atteint, où il augmentera avec md, lg, xlet 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-fluidpour 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 .