2.1 — Containers & breakpoints
⏱️ TL;DR — Un container est l’élément le plus externe du layout : il fixe la largeur et centre le contenu. Bootstrap en propose trois familles :
.container(largeur limitée par palier),.container-fluid(100 % en permanence) et.container-{bp}(fluide jusqu’à un breakpoint, puis limité). Les breakpoints sont 6 seuils :xs,sm,md,lg,xl,xxl.
🎯 Objectifs
- Distinguer les trois types de containers.
- Mémoriser les 6 breakpoints et leurs seuils.
- Comprendre le fonctionnement mobile-first des classes.
Les breakpoints
Bootstrap est mobile-first : une classe sans suffixe s’applique à partir du plus petit écran, puis les suffixes ciblent « à partir de » tel seuil.
| Breakpoint | Suffixe | À partir de | Cible typique |
|---|---|---|---|
| Extra small | (aucun) | < 576 px | téléphones |
| Small | sm | ≥ 576 px | téléphones paysage |
| Medium | md | ≥ 768 px | tablettes |
| Large | lg | ≥ 992 px | laptops |
| Extra large | xl | ≥ 1200 px | desktops |
| Extra extra large | xxl | ≥ 1400 px | grands écrans |
Mobile-first signifie « à partir de ».
col-md-6= « à partir de md, prends 6 colonnes » ; en dessous de md, la colonne est pleine largeur. On stylise donc du plus petit au plus grand.
Les trois containers
<!-- Largeur limitée par palier, centré -->
<div class="container">…</div>
<!-- Toujours 100 % de large -->
<div class="container-fluid">…</div>
<!-- 100 % jusqu'à lg, puis largeur limitée -->
<div class="container-lg">…</div>Largeurs maximales de .container selon le breakpoint :
| Breakpoint | .container max-width |
|---|---|
| < 576 px | 100 % |
| sm | 540 px |
| md | 720 px |
| lg | 960 px |
| xl | 1140 px |
| xxl | 1320 px |
.container-{bp} reste à 100 % jusqu’à ce breakpoint, puis adopte les largeurs ci-dessus. Exemple : .container-md est fluide sur mobile/tablette portrait et se « fixe » à partir de md.
⚠️ Piège — Empiler deux containers l’un dans l’autre ajoute des paddings inutiles et décale l’alignement. En règle générale : un container par section, puis des
row/colà l’intérieur.
💡 Pour un dev React — Les breakpoints Bootstrap sont fixés par des variables Sass (
$grid-breakpoints). Si votre design system a d’autres seuils, vous pouvez les redéfinir (voir Partie 8) — utile pour aligner Bootstrap sur les tokens d’un thème existant.
✏️ Exercices
- Vous voulez un contenu pleine largeur sur mobile mais centré et limité dès les tablettes. Quel container ?
✅ Solution
.container-md : fluide jusqu’à md, puis largeur limitée.
d-none d-md-block: que fait cette combinaison ?
✅ Solution
L’élément est caché en dessous de md, puis affiché (block) à partir de md — grâce au principe mobile-first.
🧠 Quiz de révision
1. Combien de breakpoints Bootstrap 5.3 définit-il ?
Six : xs (implicite), sm, md, lg, xl, xxl.
2. À partir de quelle largeur commence md ?
md ?768 px.
3. Que signifie « mobile-first » pour une classe comme col-lg-4 ?
col-lg-4 ?Elle s’applique à partir de lg ; en dessous, la colonne est pleine largeur.
4. Différence entre .container et .container-fluid ?
.container et .container-fluid ?.container a une largeur max par palier ; .container-fluid fait toujours 100 %.
5. Que fait .container-lg en dessous de lg ?
.container-lg en dessous de lg ?Il est fluide (100 %), puis se limite en largeur à partir de lg.
Chapitre suivant : 2.2 — La grille en 12 colonnes