Storybook / Grid Flex

Introduction

Bootstrap propose un système de grille flexbox mobile-first pour créer des mises en page multi-tailles grâce à un système à 12 colonnes dans 6 breakpoints.
Il nécessite l'utilisation de .container, de .row et de .col.

Exemple

Column

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

Cet exemple a 3 colonnes de largeur identique se comporte de façon iso sur tous les devices dans la limite du .container.

Comment ça marche

Le site est conçu sur une grille de 12 colonnes adaptables suivant les 6 breakpoints.
Les gutters (gouttières) associées à cette mécanique sont adaptatives et personnalisables.
Il est possible de modifier les gutters horizontales grâce à .gx-*, les gutters verticales grâce à .gy-* et les gutters générales grâce à .g-*.
Il est également possible de supprimer les gutters grâce à .g-0.

Options

	XS <576px	SM ≥576px	MD ≥768px	LG ≥992px	XL ≥1200px	XL ≥1400px
Largeur maximale du conteneur	Aucun (auto)	540px	720px	960px	1140px	1320px
Préfixe de classe	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`	`.col-xxl-`
# de colonnes	12
Largeur de gouttière	`24px` (12px de chaque côté d'une colonne)

Auto-layout columns

Largeurs égales automatiques

1 of 2

2 of 2

1 of 3

2 of 3

3 of 3

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

Définir la largeur d'une colonne

Possibilité de préciser colonne par colonne la largeur (en proportion sur base 12). Celle dont rien n'est précisé se répartissent l'espace restant de façon équitable.

1 of 3

2 of 3 (6/12)

3 of 3

1 of 3

2 of 3 (6/12)

3 of 3

<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

Possibilité d'affecter une largeur variable en fonction de son contenu en utilisant la classe .col-{breakpoint}-auto pour préciser "à partir de quel device".

1 of 3

Variable width content

3 of 3

1 of 3

Variable width content

3 of 3

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

Responsive behavior

Bootstrap permet des mises en place de grille personnalisables en fonction des devices.

Breakpoints

Du plus petit au plus grand device, il est possible de préciser le comportement attendu sur chaque device en utilisant les classes .col-* (largeur souhaitée sur base 12) ou .col (largeur automatique par défaut).

col

col-8

col-4

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

Répartition horizontale à partir d'un breakpoint

Par exemple, on utilise la classe .col-md-* pour indiquer que la répartition demandée se fait à partir de md.
Avant ce device, les éléments resteront les uns en dessous des autres.

col-md-8

col-md-4

col-md

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

Mix

Utilisez des combinaisons d'agencement de vos blocs avec des comportements différents en fonction des devices.

.col-md-8

.col-6 .col-md-4

.col-6

<div class="container">
  <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>

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

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

Pilotage depuis les rows

Pour des colonnes de taille identique, il est possible de piloter leur comportement pour chaque device depuis la div parente .row en ajoutant la classe .row-cols-*.
Quelques exemples ci-après :

Column

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

Column

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

Column

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

Column

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

Column

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

Column

<div class="container">
    <div class="row ow-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>

A noter qu'il est possible d'utiliser les mixins sass associées row-cols(nb).

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

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

Imbrication

Il est possible d'imbriquer des grilles dans des grilles, des .row dans des .col en respectant la mécanique des 12 colonnes.

Level 1: .col-sm-9

Level 2: .col-8 .col-sm-6

Level 2: .col-4 .col-sm-6

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

Colonnes

Il est possible d'utiliser les classes, utilitaires d'alignement des flexbox.

Alignement vertical

Modifiez l'alignement vertical à l'aide de l'une des classes .align-items-*.

One of three columns

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

One of three columns

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

One of three columns

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

Vous pouvez également modifier l'alignement de chaque colonne individuellement à l'aide de l'une des classes .align-self-*.

One of three columns

<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

Modifiez l'alignement horizontal à l'aide de l'une des classes .justify-content-*.

One of two columns

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

Saut de colonne

Comme évoqué plus haut, il est possible de mettre en place un retour à la ligne sans avoir à utiliser de multiples .row.
Il est également possible d'appliquer le retour en fonction des breakpoints.

.col-6 .col-sm-4

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

Ordre

Il est possible de contrôler l'ordre d'affichage via les classes .order-.
Ces classes sont adaptatives en fonction des breakpoint (par exemple .order-1.order-md-2.
Attention de ne pas en abuser pour des raisons d'accessibilité.

First in DOM, no order applied

Second in DOM, with a larger order

Third in DOM, with an order of 1

<div class="container">
  <div class="row">
    <div class="col">First in DOM, no order applied</div>
    <div class="col order-5">Second in DOM, with a larger order</div>
    <div class="col order-1">Third in DOM, with an order of 1</div>
  </div>
</div>

À noter la possibilité d'utiliser .order-first et .order-last.

First in DOM, ordered last

Second in DOM, unordered

Third in DOM, ordered first

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

Offset

Les classes .offset- permettent de décaler les agencements des colonnes (les marges se calent sur la base 12 de mécanisme général).
Ce mécanisme se combine avec les breakpoints.
Par exemple, .offset-md-4 décalera le bloc concerné d'une marge 4 colonnes à partir du breakpoint md et plus.

.col-md-4

.col-md-4 .offset-md-4

.col-md-3 .offset-md-3

.col-md-6 .offset-md-3

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

Voici un exemple incluant des réinitialisations des décalages.

.col-sm-5 .col-md-6

.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0

.col-sm-6 .col-md-5 .col-lg-6

.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0

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

Marge Utilities

Avec le passage à Flexbox dans la version 4, vous pouvez utiliser des utilitaires de marge .me-auto pour forcer l'espacement entre les colonnes sœurs.
Pour rappel : 's' signifie start et 'e' signifie end.

.col-md-4

.col-md-4 .ms-auto

.col-md-3 .ms-md-auto

.col-auto .me-auto

.col-auto

<div class="container">
  <div class="row">
      <div class="col-md-4"><div class="labo-col-item">.col-md-4</div></div>
      <div class="col-md-4 ms-auto"><div class="labo-col-item">.col-md-4 .ms-auto</div></div>
  </div>
  <div class="row">
      <div class="col-md-3 ms-md-auto"><div class="labo-col-item">.col-md-3 .ms-md-auto</div></div>
      <div class="col-md-3 ms-md-auto"><div class="labo-col-item">.col-md-3 .ms-md-auto</div></div>
  </div>
  <div class="row">
      <div class="col-auto me-auto"><div class="labo-col-item">.col-auto .me-auto</div></div>
      <div class="col-auto"><div class="labo-col-item">.col-auto</div></div>
  </div>
</div>

Colonnes sans row

Exemple d'un bloc .clearfix contenant une colonne pour mettre en place une image.

Voici un paragraphe de texte d'exemple. Nous l'utilisons ici pour illustrer l'utilisation de la classe Clearfix. Nous y ajoutons plusieurs phrases sans signification particulière afin de montrer comment les colonnes interagissent avec l'image flottante.

Comme vous pouvez le constater, les paragraphes s'enroulent harmonieusement autour de l'image flottante. Imaginez maintenant le rendu avec du contenu, au lieu de ce texte d'espace vide et ennuyeux qui s'éternise sans rien apporter de concret. Il ne fait qu'occuper de la place et ne devrait pas être lu.

Et pourtant, vous êtes là, à persévérer dans la lecture de ce texte d'exemple, espérant y trouver des informations supplémentaires, ou un contenu caché. Une blague, peut-être. Malheureusement, il n'en est rien.

<div class="clearfix">
  <img src="..." class="col-md-6 float-md-end mb-3 ms-md-3" alt="...">
  <p>Lorem ipsum ...</p>
  <p>Lorem ipsum ...</p>
  <p>Lorem ipsum ...</p>
</div>

Mixins

La mécanique des grilles est directement liée aux déclarations des breakpoints et certaines variables de mise en place comme $grid-columns:12; ou $grid-gutter-width:16px;. Il est possible de personnaliser ces variables ou d'utiliser les mixins associées.

Exemple

.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);
  }
}