2.2 — La grille en 12 colonnes

⏱️ TL;DR — La grille Bootstrap repose sur trois niveaux : container › row › col. Chaque row est divisée en 12 colonnes égales. col-6 prend 6/12 (la moitié) ; col-md-4 prend 4/12 à partir de md. Sans nombre, col partage l’espace restant à parts égales. C’est de la Flexbox sous le capot.

🎯 Objectifs

• Construire une grille responsive avec row et col.
• Utiliser les colonnes auto (col) et à largeur définie (col-*).
• Combiner plusieurs breakpoints sur une même colonne.

Le trio container / row / col

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

Trois col sans nombre → l’espace se divise automatiquement en trois parts égales (4 colonnes chacune).

Colonnes à largeur définie

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

La somme doit idéalement faire 12. Au-delà, les colonnes passent à la ligne (wrap).

Colonnes responsives

On empile les breakpoints pour changer la répartition selon la taille d’écran :

<div class="row">
  <!-- pleine largeur sur mobile, moitié dès md, tiers dès lg -->
  <div class="col-12 col-md-6 col-lg-4">A</div>
  <div class="col-12 col-md-6 col-lg-4">B</div>
  <div class="col-12 col-md-6 col-lg-4">C</div>
</div>

Colonnes mixtes : une fixe, le reste auto

<div class="row">
  <div class="col-3">Largeur fixe 3/12</div>
  <div class="col">Prend tout le reste</div>
</div>

Et col-auto dimensionne la colonne selon son contenu :

<div class="row">
  <div class="col-auto">Aussi large que son texte</div>
  <div class="col">Le reste</div>
</div>

Grille par lignes : row-cols

Pour dire « N colonnes par ligne » sans annoter chaque enfant :

<!-- 2 colonnes par ligne sur mobile, 4 dès md -->
<div class="row row-cols-2 row-cols-md-4 g-3">
  <div class="col">1</div>
  <div class="col">2</div>
  <div class="col">3</div>
  <div class="col">4</div>
</div>

⚠️ Piège — Mettre un col directement dans un container sans row : les marges négatives de la grille ne sont pas compensées et le contenu déborde. Toujours row entre container et col.

💡 Pour un dev React — En React, row-cols-md-4 est très pratique pour rendre une liste : vous mappez vos items en <div className="col">…</div> sans calculer la largeur de chacun. La grille gère le wrap toute seule.

✏️ Exercices

1. Faites une grille de cartes : 1 par ligne sur mobile, 2 dès sm, 3 dès lg.

<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 g-4">
  <div class="col">…</div>
  <!-- répéter -->
</div>

2. Une sidebar fixe de 3 colonnes et un contenu qui prend le reste, quel que soit l’écran ?

<div class="row">
  <div class="col-3">sidebar</div>
  <div class="col">contenu</div>
</div>

🧠 Quiz de révision

Chapitre suivant : 2.3 — Colonnes avancées (offset, order, align)