Exemple

Le système de grille de Bootstrap utilise une série de conteneurs, de lignes et de colonnes pour mettre en page et aligner le contenu. Il est construit avec flexbox et est entièrement réactif. Vous trouverez ci-dessous un exemple et une explication détaillée de la manière dont le système de grille se combine.

<div class="container">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

L'exemple ci-dessus crée trois colonnes de largeur égale sur tous les appareils et fenêtres à l'aide de nos classes de grille prédéfinies. Ces colonnes sont centrées dans la page avec le parent .container.

Comment ça fonctionne

En décomposant, voici comment le système de grille s'organise :

• Notre grille prend en charge six points d'arrêt réactifs. Les points d'arrêt sont basés sur min-width les requêtes multimédias, ce qui signifie qu'elles affectent ce point d'arrêt et tous ceux qui le précèdent (par exemple, .col-sm-4 s'applique à sm, md, lg, xl et xxl). Cela signifie que vous pouvez contrôler la taille et le comportement des conteneurs et des colonnes à chaque point d'arrêt.

• Les conteneurs centrent et remplissent horizontalement votre contenu. Utilisez .container pour une largeur de pixel réactive, .container-fluid pour width : 100 % sur toutes les fenêtres d'affichage et tous les appareils, ou un conteneur réactif (par exemple, .container-md) pour une combinaison de largeurs fluide et pixel.

• Les lignes sont des enveloppes pour les colonnes. Chaque colonne a un remplissage horizontal (appelé gouttière) pour contrôler l'espace entre elles. Ce padding est ensuite contrecarré sur les lignes avec des marges négatives pour garantir que le contenu de vos colonnes est visuellement aligné sur le côté gauche. Les lignes prennent également en charge les classes de modification pour appliquer uniformément le dimensionnement des colonnes et les classes de gouttière pour modifier l'espacement de votre contenu.

• Les colonnes sont incroyablement flexibles. Il existe 12 modèles de colonnes disponibles par ligne, ce qui vous permet de créer différentes combinaisons d'éléments qui s'étendent sur n'importe quel nombre de colonnes. Les classes de colonne indiquent le nombre de colonnes de modèle à couvrir (par exemple, col-4 couvre quatre). Les width sont définis en pourcentages afin que vous ayez toujours le même dimensionnement relatif.

• Les gouttières sont également réactives et personnalisables. Des classes de gouttières sont disponibles à travers tous les points d'arrêt, avec tous les mêmes tailles que notre espacement de marge et de rembourrage. Modifiez les gouttières horizontales avec les classes .gx-*, les gouttières verticales avec .gy-*, ou toutes les gouttières avec les classes .g-*. .g-0 est également disponible pour supprimer les gouttières.

• Les variables Sass, les cartes et les mixins alimentent la grille. Si vous ne souhaitez pas utiliser les classes de grille prédéfinies dans Bootstrap, vous pouvez utiliser notre grille’s source Sass pour créer le vôtre avec plus de balisage sémantique. Nous incluons également certaines propriétés personnalisées CSS pour utiliser ces variables Sass pour une flexibilité encore plus grande pour vous.

Soyez conscient des limitations et des bogues autour de flexbox, comme le impossibilité d'utiliser certains éléments HTML comme conteneurs flexibles.

Options de grille

Le système de grille de Bootstrap peut s'adapter aux six points d'arrêt par défaut et à tous les points d'arrêt que vous personnalisez. Les six niveaux de grille par défaut sont les suivants :

• Extra small (xs)
• Small (sm)
• Medium (md)
• Large (lg)
• Extra large (xl)
• Extra extra large (xxl)

Comme indiqué ci-dessus, chacun de ces points d'arrêt a son propre conteneur, un préfixe de classe unique et des modificateurs. Voici comment la grille change entre ces points d'arrêt :

Colonnes de mise en page automatique

Utilisez des classes de colonnes spécifiques aux points d'arrêt pour un dimensionnement facile des colonnes sans classe numérotée explicite comme .col-sm-6.

Largeur égale

Par exemple, voici deux dispositions de grille qui s'appliquent à chaque appareil et fenêtre d'affichage, de xs à xxl. Ajoutez n'importe quel nombre de classes sans unité pour chaque point d'arrêt dont vous avez besoin et chaque colonne aura la même largeur.

<div class="container">
  <div class="row">
    <div class="col">
      1 de 2
    </div>
    <div class="col">
      2 de 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 de 3
    </div>
    <div class="col">
      2 de 3
    </div>
    <div class="col">
      3 de 3
    </div>
  </div>
</div>

Définition d'une largeur de colonne

La mise en page automatique des colonnes de la grille flexbox signifie également que vous pouvez définir la largeur d'une colonne et que les colonnes sœurs se redimensionnent automatiquement autour d'elle. Vous pouvez utiliser des classes de grille prédéfinies (comme indiqué ci-dessous), des mixins de grille ou des largeurs en ligne. Notez que les autres colonnes seront redimensionnées quelle que soit la largeur de la colonne centrale.

<div class="container">
  <div class="row">
    <div class="col">
      1 de 3
    </div>
    <div class="col-6">
      2 de 3 (wider)
    </div>
    <div class="col">
      3 de 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 de 3
    </div>
    <div class="col-5">
      2 de 3 (wider)
    </div>
    <div class="col">
      3 de 3
    </div>
  </div>
</div>

Contenu à largeur variable

Utilisez les classes col-{breakpoint}-auto pour dimensionner les colonnes en fonction de la largeur naturelle de leur contenu.

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 de 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 de 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 de 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 de 3
    </div>
  </div>
</div>

Classes réactives

La grille de Bootstrap comprend six niveaux de classes prédéfinies pour créer des mises en page réactives complexes. Personnalisez la taille de vos colonnes sur des appareils très petits, petits, moyens, grands ou très grands comme bon vous semble.

Tous les points d'arrêt

Pour les grilles identiques du plus petit appareil au plus grand, utilisez les classes .col et .col-*. Spécifiez une classe numérotée lorsque vous avez besoin d'une colonne de taille particulière ; sinon, n'hésitez pas à vous en tenir à .col.

<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
  <div class="row">
    <div class="col-8">col-8</div>
    <div class="col-4">col-4</div>
  </div>
</div>

Empilé à l'horizontale

En utilisant un ensemble unique de classes .col-sm-*, vous pouvez créer un système de grille de base qui commence empilé et devient horizontal au petit point d'arrêt (sm ).

<div class="container">
  <div class="row">
    <div class="col-sm-8">col-sm-8</div>
    <div class="col-sm-4">col-sm-4</div>
  </div>

  <div class="row">
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
  </div>
</div>

Mélanger et assortir

Vous ne voulez pas que vos colonnes s'empilent simplement dans certains niveaux de grille ? Utilisez une combinaison de différentes classes pour chaque niveau selon vos besoins. Voir l'exemple ci-dessous pour une meilleure idée de la façon dont tout cela fonctionne.

<div class="container">
  <!-- Stack the columns on mobile by making one full-width and the other half-width -->
  <div class="row">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
  <div class="row">
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns are always 50% wide, on mobile and desktop -->
  <div class="row">
    <div class="col-6">.col-6</div>
    <div class="col-6">.col-6</div>
  </div>
</div>

Colonnes de ligne

Utilisez les classes responsives .row-cols-* pour définir rapidement le nombre de colonnes qui rendent le mieux votre contenu et votre mise en page. Alors que les classes normales .col-* s'appliquent aux colonnes individuelles (par exemple, .col-md-4), les classes de colonnes de ligne sont définies sur le parent . row par défaut pour les colonnes contenues. Avec .row-cols-auto vous pouvez donner aux colonnes leur largeur naturelle.

Utilisez ces classes de colonnes de lignes pour créer rapidement des dispositions de grille de base ou pour contrôler les dispositions de vos cartes et les remplacer si nécessaire au niveau des colonnes.

<div class="container">
  <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-auto">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-6">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-2 row-cols-lg-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
  </div>
</div>

Vous pouvez également utiliser le mixin Sass qui l'accompagne, row-cols() :

.element {
  // Three columns to start
  @include row-cols(3);

  // Five columns from medium breakpoint up
  @include media-breakpoint-up(md) {
    @include row-cols(5);
  }
}

Nidification

Pour imbriquer votre contenu avec la grille par défaut, ajoutez un nouveau .row et un ensemble de colonnes .col-sm-* dans un .col- existant colonne sm-*. Les lignes imbriquées doivent inclure un ensemble de colonnes qui totalisent jusqu'à 12 colonnes ou moins (il n'est pas nécessaire que vous utilisiez les 12 colonnes disponibles).

<div class="container">
  <div class="row">
    <div class="col-sm-3">
      Level 1: .col-sm-3
    </div>
    <div class="col-sm-9">
      <div class="row">
        <div class="col-8 col-sm-6">
          Level 2: .col-8 .col-sm-6
        </div>
        <div class="col-4 col-sm-6">
          Level 2: .col-4 .col-sm-6
        </div>
      </div>
    </div>
  </div>
</div>

Sass

Lorsque vous utilisez les fichiers source Sass de Bootstrap, vous avez la possibilité d'utiliser des variables Sass et des mixins pour créer des mises en page personnalisées, sémantiques et réactives. Nos classes de grille prédéfinies utilisent ces mêmes variables et mixins pour fournir toute une suite de classes prêtes à l'emploi pour des mises en page réactives rapides.

Variables

Les variables et les cartes déterminent le nombre de colonnes, la largeur de la gouttière et le point de requête multimédia auquel commencer les colonnes flottantes. Nous les utilisons pour générer les classes de grille prédéfinies documentées ci-dessus, ainsi que pour les mixins personnalisés répertoriés ci-dessous.

$grid-columns:      12;
$grid-gutter-width: 1.5rem;

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
);

Mixins

Les mixins sont utilisés conjointement avec les variables de grille pour générer du CSS sémantique pour les colonnes de grille individuelles.

// Creates a wrapper for a series of columns
@include make-row();

// Make the element grid-ready (applying everything but the width)
@include make-col-ready();

// Without optional size values, the mixin will create equal columns (similar to using .col)
@include make-col();
@include make-col($size, $columns: $grid-columns);

// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);

Exemple d'utilisation

Vous pouvez modifier les variables avec vos propres valeurs personnalisées ou simplement utiliser les mixins avec leurs valeurs par défaut. Voici un exemple d'utilisation des paramètres par défaut pour créer une mise en page à deux colonnes avec un espace entre les deux.

.example-container {
  @include make-container();
  // Make sure to define this width after the mixin to override
  // `width: 100%` generated by `make-container()`
  width: 800px;
}

.example-row {
  @include make-row();
}

.example-content-main {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(8);
  }
}

.example-content-secondary {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(4);
  }
}

<div class="example-container">
  <div class="example-row">
    <div class="example-content-main">Main content</div>
    <div class="example-content-secondary">Secondary content</div>
  </div>
</div>

Personnalisation de la grille

En utilisant nos variables et cartes Sass de grille intégrées, il est possible de personnaliser complètement les classes de grille prédéfinies. Modifiez le nombre de niveaux, les dimensions de la requête multimédia et la largeur des conteneurs, puis recompilez.

Colonnes et gouttières

Le nombre de colonnes de la grille peut être modifié via les variables Sass. $grid-columns est utilisé pour générer les largeurs (en pourcentage) de chaque colonne individuelle tandis que $grid-gutter-width définit la largeur des gouttières de colonne.

$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;

Niveaux de grille

Au-delà des colonnes elles-mêmes, vous pouvez également personnaliser le nombre de niveaux de grille. Si vous vouliez seulement quatre niveaux de grille, vous mettriez à jour les $grid-breakpoints et $container-max-widths à quelque chose comme ceci :

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px
);

$container-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

Lorsque vous apportez des modifications aux variables ou aux cartes Sass, vous devez enregistrer vos modifications et recompiler. Cela produira un tout nouvel ensemble de classes de grille prédéfinies pour les largeurs de colonne, les décalages et l'ordre. Les utilitaires de visibilité réactifs seront également mis à jour pour utiliser les points d'arrêt personnalisés. Assurez-vous de définir les valeurs de grille en px (et non rem, em ou %).