Le système de grille de Bootstrap

Système de grille

L'une des fonctionnalités les plus prisées de Bootstrap est son système de grille.

Le système de grille de Bootstrap permet d'afficher du contenu sur une page en utilisant une grille de 12 colonnes de large.

Avec Bootstrap, la grille est construite avec un flexbox, assurant ainsi la possibilité d'un affichage réactif.

Les étapes sont :

1. déclarer une ou plusieurs lignes à l'aide de la classe row (objet flexbox par défaut)
2. ajouter des colonnes dans la ligne avec l'une des variantes de la classe col

Exemples de base :

La classe col unquement divise les 12 colonnes de base par le nombre de colonnes demandé :

Créer une ligne de deux colonnes d'égale largeur.

    <div class="row">
      <div class="col">colonne 1, 50% de largeur</div>
      <div class="col">colonne 2, 50% de largeur</div>
    </div>

---

Créer une ligne de deux colonnes de largeurs différentes -> remarquez qu'en additionnant la largeur de chaque colonne, on obtient un total de 12.

    <div class="row">
      <div class="col-2">2 / 12 colonnes</div>
      <div class="col-10">10 / 12 colonnes</div>
    </div>

Pour créer des grilles réactives: indiquer à partir de quelle taille d'écran la grille s'affiche sur une ligne.

Cela s'effectue avec les classes suivantes :

Tableau tiré de w3Schools

Exemple réactif :

    <!-- On indique non seulement la largeur de la colonne, mais sur quel largeur d'écran les colonnes doivent s'empiler -->
    <div class="row">
      <div class="col-sm-2">2 / 12 colonnes</div>
      <div class="col-sm-8">8 / 12 colonnes</div>
      <div class="col-sm-2">2 / 12 colonnes</div>
    </div>

---

On peut aussi indiquer la taille de chaque cellule par taille d'écran :

    <!-- On indique non seulement la largeur de la colonne, mais sur quel largeur d'écran les colonnes doivent s'empiler -->
    <div class="row">
      <div class="col-12 col-sm-6 col-md-3">Pleine largeur sur mobile, 6/12 sur petits écrans, 3/12 sur écrans moyens et plus </div>
      <div class="col-12 col-sm-6 col-md-9 col-lg-3">Pleine largeur sur mobile, 6/12 sur petits écrans, 9/12 sur écrans moyens, 3/12 sur écrans larges et plus</div>
      <div class="col-12 col-sm-6 col-lg-3">Pleine largeur sur mobile, 6/12 sur petits écrans jusqu'à 3/12 sur écrans larges et plus</div>
      <div class="col-12 col-sm-6 col-lg-3">Pleine largeur sur mobile, 6/12 sur petits écrans jusqu'à 3/12 sur écrans larges et plus</div>
    </div>

Pour plusieurs exemples et d'autres possibilités avec le système de grille :

Rubrique d'aide sur le système de grille