Système de grille

Utilisez notre puissante grille flexbox mobile-first pour créer des mises en page de toutes formes et tailles grâce à un système à douze colonnes, cinq niveaux réactifs par défaut, des variables et mixins Sass et des dizaines de classes prédéfinies.

Comment ça fonctionne

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 un examen approfondi de la façon dont la grille se rassemble.

Nouveau ou peu familier avec flexbox ? Lisez ce guide CSS Tricks flexbox pour le contexte, la terminologie, les directives et les extraits de code.

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

L'exemple ci-dessus crée trois colonnes de largeur égale sur des appareils petits, moyens, grands et très grands à l'aide de nos classes de grille prédéfinies. Ces colonnes sont centrées dans la page avec le parent .container.

En décomposant, voici comment cela fonctionne :

• Les conteneurs permettent de centrer et de remplir horizontalement le contenu de votre site. À utiliser .containerpour une largeur de pixel réactive ou .container-fluidpour width: 100%toutes les tailles de fenêtres et d'appareils.
• Les lignes sont des wrappers pour les colonnes. Chaque colonne a une horizontale padding(appelée gouttière) pour contrôler l'espace entre elles. Ceci paddingest ensuite contrecarré sur les lignes avec des marges négatives. De cette façon, tout le contenu de vos colonnes est aligné visuellement sur le côté gauche.
• Dans une disposition en grille, le contenu doit être placé dans des colonnes et seules les colonnes peuvent être des enfants immédiats des lignes.
• Grâce à flexbox, les colonnes de grille sans spécification widthseront automatiquement disposées en colonnes de largeur égale. Par exemple, quatre instances de .col-smauront chacune automatiquement une largeur de 25 % à partir du petit point d'arrêt et plus. Voir la section des colonnes de mise en page automatique pour plus d'exemples.
• Les classes de colonnes indiquent le nombre de colonnes que vous souhaitez utiliser sur les 12 possibles par ligne. Donc, si vous voulez trois colonnes de largeur égale, vous pouvez utiliser .col-4.
• Les colonnes widthsont définies en pourcentages, elles sont donc toujours fluides et dimensionnées par rapport à leur élément parent.
• Les colonnes ont une horizontale paddingpour créer les gouttières entre les colonnes individuelles, cependant, vous pouvez supprimer les marginlignes et les paddingcolonnes avec .no-gutterssur le .row.
• Pour rendre la grille réactive, il existe cinq points d'arrêt de grille, un pour chaque point d' arrêt réactif : tous les points d'arrêt (extra petit), petit, moyen, grand et très grand.
• Les points d'arrêt de la grille sont basés sur des requêtes multimédias de largeur minimale, ce qui signifie qu'ils s'appliquent à ce point d'arrêt et à tous ceux qui le précèdent (par exemple, .col-sm-4s'appliquent aux appareils petits, moyens, grands et très grands, mais pas au premier point d' xsarrêt).
• Vous pouvez utiliser des classes de grille prédéfinies (comme .col-4) ou des mixins Sass pour un balisage plus sémantique.

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

Options de grille

Alors que Bootstrap utilise ems ou rems pour définir la plupart des tailles, pxs est utilisé pour les points d'arrêt de grille et les largeurs de conteneur. Cela est dû au fait que la largeur de la fenêtre d'affichage est en pixels et ne change pas avec la taille de la police .

Découvrez comment les aspects du système de grille Bootstrap fonctionnent sur plusieurs appareils avec un tableau pratique.

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à xl. 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 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

Les colonnes de largeur égale peuvent être divisées en plusieurs lignes, mais il y avait un bogue Safari flexbox qui empêchait cela de fonctionner sans explicite flex-basisou border. Il existe des solutions de contournement pour les anciennes versions de navigateur, mais elles ne devraient pas être nécessaires si vous êtes à jour.

<div class="container">
  <div class="row">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="w-100"></div>
    <div class="col">Column</div>
    <div class="col">Column</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 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

Contenu à largeur variable

Utilisez col-{breakpoint}-autodes classes 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 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

Multi-rangées à largeur égale

Créez des colonnes de même largeur qui s'étendent sur plusieurs lignes en insérant un .w-100à l'endroit où vous souhaitez que les colonnes se divisent en une nouvelle ligne. Rendez les pauses réactives en mélangeant le .w-100avec des utilitaires d'affichage réactifs .

<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="w-100"></div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
</div>

Cours réactifs

La grille de Bootstrap comprend cinq 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 .colet . .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

À l' aide d'un seul ensemble de .col-sm-*classes, 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-12 col-md-8">.col-12 .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>

Gouttières

Les gouttières peuvent être ajustées de manière réactive par un rembourrage spécifique au point d'arrêt et des classes d'utilitaires à marge négative. Pour modifier les gouttières dans une ligne donnée, associez un utilitaire de marge négative sur le .rowet des utilitaires de remplissage correspondants sur le .cols. Le parent .containerou .container-fluidpeut également devoir être ajusté pour éviter un débordement indésirable, en utilisant à nouveau l'utilitaire de remplissage correspondant.

Voici un exemple de personnalisation de la grille Bootstrap au lgpoint d'arrêt large ( ) et au-dessus. Nous avons augmenté le .colrembourrage avec .px-lg-5, contrecarré cela avec .mx-lg-n5sur le parent .row, puis ajusté le .containerwrapper avec .px-lg-5.

<div class="container px-lg-5">
  <div class="row mx-lg-n5">
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
  </div>
</div>

Alignement

Utilisez les utilitaires d'alignement Flexbox pour aligner verticalement et horizontalement les colonnes. Internet Explorer 10-11 ne prend pas en charge l'alignement vertical des éléments flexibles lorsque le conteneur flexible a min-heightcomme indiqué ci-dessous. Voir Flexbugs #3 pour plus de détails.

Alignement vertical

<div class="container">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col align-self-start">
      One of three columns
    </div>
    <div class="col align-self-center">
      One of three columns
    </div>
    <div class="col align-self-end">
      One of three columns
    </div>
  </div>
</div>

Alignement horizontal

<div class="container">
  <div class="row justify-content-start">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

Pas de gouttières

Les gouttières entre les colonnes dans nos classes de grille prédéfinies peuvent être supprimées avec .no-gutters. Cela supprime le margins négatif .rowet l'horizontal paddingde toutes les colonnes enfants immédiates.

Voici le code source pour créer ces styles. Notez que les remplacements de colonne ne concernent que les premières colonnes enfants et sont ciblés via l' attribut selector . Bien que cela génère un sélecteur plus spécifique, le rembourrage des colonnes peut encore être personnalisé avec des utilitaires d'espacement .

Besoin d'un design bord à bord ? Supprimez le parent .containerou .container-fluid.

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

En pratique, voici à quoi cela ressemble. Notez que vous pouvez continuer à l'utiliser avec toutes les autres classes de grille prédéfinies (y compris les largeurs de colonne, les niveaux réactifs, les réorganisations, etc.).

<div class="row no-gutters">
  <div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

Emballage de colonne

Si plus de 12 colonnes sont placées dans une seule ligne, chaque groupe de colonnes supplémentaires sera, comme une unité, enveloppé sur une nouvelle ligne.

<div class="container">
  <div class="row">
    <div class="col-9">.col-9</div>
    <div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
    <div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
  </div>
</div>

Sauts de colonne

Briser les colonnes sur une nouvelle ligne dans flexbox nécessite un petit hack : ajoutez un élément à l' width: 100%endroit où vous souhaitez envelopper vos colonnes sur une nouvelle ligne. Normalement, cela est accompli avec plusieurs .rows, mais toutes les méthodes d'implémentation ne peuvent pas en tenir compte.

<div class="container">
  <div class="row">
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>

    <!-- Force next columns to break to new line -->
    <div class="w-100"></div>

    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  </div>
</div>

Vous pouvez également appliquer cette pause à des points d'arrêt spécifiques avec nos utilitaires d'affichage réactifs .

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

    <!-- Force next columns to break to new line at md breakpoint and up -->
    <div class="w-100 d-none d-md-block"></div>

    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  </div>
</div>

Réorganisation

Cours de commande

Utilisez .order-des classes pour contrôler l' ordre visuel de votre contenu. Ces classes sont réactives, vous pouvez donc définir le orderpar point d'arrêt (par exemple, .order-1.order-md-2). Inclut la prise en charge de 1l' 12ensemble des cinq niveaux de grille.

<div class="container">
  <div class="row">
    <div class="col">
      First, but unordered
    </div>
    <div class="col order-12">
      Second, but last
    </div>
    <div class="col order-1">
      Third, but first
    </div>
  </div>
</div>

Il existe également des classes responsive .order-firstet qui modifient la d'un élément en appliquant et ( ), respectivement. Ces classes peuvent également être mélangées avec les classes numérotées selon les besoins..order-lastorderorder: -1order: 13order: $columns + 1.order-*

<div class="container">
  <div class="row">
    <div class="col order-last">
      First, but last
    </div>
    <div class="col">
      Second, but unordered
    </div>
    <div class="col order-first">
      Third, but first
    </div>
  </div>
</div>

Colonnes de décalage

Vous pouvez décaler les colonnes de la grille de deux manières : nos .offset-classes de grille réactives et nos utilitaires de marge . Les classes de grille sont dimensionnées pour correspondre aux colonnes tandis que les marges sont plus utiles pour les mises en page rapides où la largeur du décalage est variable.

Classes de décalage

Déplacez les colonnes vers la droite à l'aide des .offset-md-*classes. Ces classes augmentent la marge gauche d'une colonne par *colonnes. Par exemple, .offset-md-4se déplace .col-md-4sur quatre colonnes.

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  </div>
  <div class="row">
    <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
  </div>
</div>

Outre l'effacement des colonnes aux points d'arrêt réactifs, vous devrez peut-être réinitialiser les décalages. Voyez ceci en action dans l'exemple de grille .

<div class="container">
  <div class="row">
    <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
    <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
  </div>
  <div class="row">
    <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
    <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
  </div>
</div>

Utilitaires de marge

Avec le passage à flexbox dans la v4, vous pouvez utiliser des utilitaires de marge tels .mr-autoque forcer les colonnes sœurs à s'éloigner les unes des autres.

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
  </div>
  <div class="row">
    <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
    <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
  </div>
  <div class="row">
    <div class="col-auto mr-auto">.col-auto .mr-auto</div>
    <div class="col-auto">.col-auto</div>
  </div>
</div>

Nidification

Pour imbriquer votre contenu avec la grille par défaut, ajoutez un nouveau .rowet un ensemble de colonnes dans une colonne .col-sm-*existante . .col-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-9">
      Level 1: .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>

Mélanges 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: 30px;

$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 576px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 992px,
  // Extra large screen / wide desktop
  xl: 1200px
);

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

Mélanges

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();
@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 {
  width: 800px;
  @include make-container();
}

.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-columnsest utilisé pour générer les largeurs (en pourcentage) de chaque colonne individuelle tandis que $grid-gutter-widthdéfinit la largeur des gouttières de colonne.

$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;

Niveaux de grille

Au-delà des colonnes elles-mêmes, vous pouvez également personnaliser le nombre de niveaux de grille. Si vous ne vouliez que quatre niveaux de grille, vous mettriez à jour le $grid-breakpointset $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 dans px(pas rem, em, ou %).