Skip to Content
BootstrapPartie 2 — Mise en page : grille & layout2.4 — Les gouttières (gutters)

2.4 — Les gouttières (gutters)

⏱️ TL;DR — Les gouttières sont les espaces entre les colonnes (et entre les lignes). On les contrôle avec g-* (les deux axes), gx-* (horizontal) et gy-* (vertical), sur une échelle de 0 à 5. Techniquement, ce sont des paddings sur les colonnes, compensés par des marges négatives sur la row.

🎯 Objectifs

  • Régler l’espacement horizontal et vertical des colonnes.
  • Supprimer complètement les gouttières.
  • Comprendre le mécanisme padding / marge négative.

L’échelle des gouttières

ClasseEspace
g-0aucune gouttière
g-10.25 rem
g-20.5 rem
g-31 rem (défaut)
g-41.5 rem
g-53 rem
<!-- gouttières larges dans les deux directions -->
<div class="row g-4">
  <div class="col-6"><div class="p-3 bg-light">A</div></div>
  <div class="col-6"><div class="p-3 bg-light">B</div></div>
</div>

Axes séparés : gx et gy

<!-- espace horizontal serré, vertical large -->
<div class="row gx-1 gy-5">…</div>
  • gx-* → espace horizontal (entre colonnes).
  • gy-* → espace vertical (entre lignes qui wrappent).
  • responsive : g-md-4, gx-lg-2, etc.

Supprimer les gouttières

<div class="row g-0">
  <div class="col-6">Collé à…</div>
  <div class="col-6">…sa voisine</div>
</div>

Utile pour des images en mosaïque ou des colonnes qui doivent se toucher.

Le mécanisme sous le capot

Une gouttière n’est pas une marge entre colonnes : c’est un padding gauche/droite appliqué à chaque colonne, tandis que la row porte une marge négative qui « annule » ce padding sur les bords extérieurs. C’est pourquoi il faut toujours un col dans un row : sans la marge négative, le premier et le dernier col auraient un padding parasite.

⚠️ Piège — Ajouter p-0 sur les colonnes pour « coller » deux blocs casse aussi la compensation. Utilisez plutôt g-0 sur la row.

💡 Pour un dev React — En 5.3, les gouttières utilisent la variable CSS --bs-gutter-x / --bs-gutter-y. Vous pouvez donc surcharger une gouttière ponctuellement en style inline (style={{'--bs-gutter-x': '2rem'}}) sans recompiler le Sass.

✏️ Exercices

  1. Une galerie d’images qui doivent se toucher, sans espace. Quelle classe sur la row ?

✅ Solution

g-0.

  1. Vous voulez peu d’espace horizontal mais beaucoup d’espace vertical entre les rangées qui wrappent. Quelles classes ?

✅ Solution

gx-1 gy-5 (ou des valeurs adaptées).

🧠 Quiz de révision

1. Quelle est la gouttière par défaut d’une row ?

g-3, soit 1 rem.

2. Que contrôle gy-4 ?

L’espace vertical entre les lignes qui passent à la ligne.

3. Techniquement, une gouttière c’est quoi ?

Un padding sur les colonnes, compensé par une marge négative sur la row.

4. Comment coller deux colonnes sans espace ?

Mettre g-0 sur la row.

5. Quelle variable CSS pilote la gouttière horizontale en 5.3 ?

--bs-gutter-x.

Chapitre suivant : 2.5 — Les utilitaires Flex

2.3 — Colonnes avancées (offset, order, align)2.5 — Les utilitaires Flex