Breakpoints Bootstrap 5 et grille responsive expliqués

Bootstrap 5 compte six niveaux responsive : extra small (moins de 576 px), sm (à partir de 576 px), md (768 px), lg (992 px), xl (1 200 px) et xxl (1 400 px). Toutes les classes responsive reprennent ces noms : col-md-6 signifie « demi-largeur à partir de 768 px » et d-lg-none « masqué à partir de 992 px ». Comme Tailwind, Bootstrap est mobile first : une classe sans breakpoint s’applique à toutes les tailles, une classe avec breakpoint s’applique à partir de cette largeur.

Breakpoints Bootstrap 5 et largeur des conteneurs

Ce sont les valeurs par défaut décrites dans la documentation Bootstrap sur les breakpoints. .container-fluid occupe toujours toute la largeur, et .container-md (comme les autres infixes) reste en pleine largeur jusqu’à son breakpoint, puis devient fixe.

La grille responsive en pratique

La grille Bootstrap compte 12 colonnes. Vous indiquez combien chaque élément en occupe à chaque breakpoint :

<div class="container">
  <div class="row g-4">
    <div class="col-12 col-md-6 col-lg-4">Card</div>
    <div class="col-12 col-md-6 col-lg-4">Card</div>
    <div class="col-12 col-md-6 col-lg-4">Card</div>
  </div>
</div>

On obtient une carte par ligne sur téléphone, deux à partir de 768 px et trois à partir de 992 px. col-12 peut être omis, car une colonne sans taille dans une row s’étire de toute façon, mais l’écrire rend l’intention plus lisible.

Pour une grille d’éléments identiques, les row columns sont plus concises :

<div class="row row-cols-1 row-cols-md-2 row-cols-lg-4 g-3">

Pour changer l’ordre des blocs à un breakpoint, on utilise les classes order, par exemple order-first order-md-0. Pratique quand une image doit suivre son titre sur mobile mais se placer à côté sur ordinateur.

Les utilitaires responsive que vous utiliserez tout le temps

• Affichage : d-none d-md-block masque sur téléphone et affiche à partir de 768 px ; d-lg-none masque à partir de 992 px.
• Direction flex : flex-column flex-md-row empile sur téléphone et aligne en ligne à partir de md.
• Espacements : p-3 p-lg-5 réduit le padding sur les petits écrans.
• Alignement du texte : text-center text-md-start.
• Navbar : navbar-expand-lg affiche le menu complet à partir de 992 px et le bouton burger en dessous.
• Tableaux : entourez les tableaux larges de .table-responsive pour qu’ils défilent dans leur propre bloc.
• Images : .img-fluid applique max-width: 100% et height: auto.

Les mixins de media queries en Sass

Si vous compilez Bootstrap depuis Sass, utilisez ses mixins plutôt que des valeurs en pixels écrites en dur :

.hero {
  padding: 2rem 1rem;

  @include media-breakpoint-up(lg) {
    padding: 5rem 2rem;
  }
}

@include media-breakpoint-down(md) { /* moins de 768px */ }
@include media-breakpoint-between(md, xl) { /* de 768px à 1199.98px */ }
@include media-breakpoint-only(md) { /* de 768px à 991.98px */ }

Attention au sens de media-breakpoint-down(md) dans Bootstrap 5 : il cible les largeurs inférieures au breakpoint md, compilées en max-width: 767.98px. Le .98 évite les chevauchements avec les largeurs fractionnaires des écrans haute densité. Bootstrap 4 utilisait le breakpoint suivant pour ce même mixin, ce qui surprend souvent lors d’une migration.

Personnaliser les breakpoints de Bootstrap

Modifiez les maps Sass avant d’importer Bootstrap :

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 1024px,
  xl: 1280px,
  xxl: 1536px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1200px,
  xxl: 1440px
);

@import "bootstrap/scss/bootstrap";

Gardez les clés dans l’ordre croissant et conservez xs: 0. Faut-il vraiment les changer ? Seulement si votre design a une vraie raison de le faire. Le guide des breakpoints responsive explique comment choisir les largeurs à partir du contenu plutôt que d’une liste d’appareils.

Les erreurs responsive courantes avec Bootstrap

• Utiliser col-6 sur mobile. Deux colonnes sur un écran de 360 px laissent environ 160 px par colonne une fois les gouttières retirées : textes et boutons tiennent rarement.
• Oublier le breakpoint de la navbar. Une navbar chargée en navbar-expand-md peut déborder entre 768 et 992 px.
• Masquer du contenu avec d-none sur mobile au lieu de le réorganiser. Google indexe la version mobile de la page.
• Mélanger des media queries maison avec d’autres valeurs que celles de Bootstrap : les composants basculent à 768 px, votre CSS à 760 px.

Tester une mise en page Bootstrap

Vérifiez chaque niveau à sa largeur exacte et 1 px en dessous : 575/576, 767/768, 991/992, 1199/1200 et 1399/1400. Dans Chrome DevTools, l’option Show media queries de la barre d’appareils affiche les breakpoints sous forme de barres cliquables.

Contrôlez ensuite des téléphones précis avec leur user agent et leur densité de pixels, ce que Mobile View Extension fait en un clic. La méthode complète est décrite dans comment tester un site responsive.

Questions fréquentes

Quels sont les breakpoints de Bootstrap 5 ?

576 px (sm), 768 px (md), 992 px (lg), 1 200 px (xl) et 1 400 px (xxl), avec un niveau extra small sans nom en dessous de 576 px.

Que signifie col-md-6 dans Bootstrap ?

L’élément occupe 6 colonnes sur 12, soit la moitié de la ligne, à partir du breakpoint md (768 px). En dessous de 768 px, il prend toute la largeur, sauf si une autre classe en décide autrement.

Bootstrap est-il mobile first ?

Oui. Les classes sans breakpoint s’appliquent à toutes les tailles d’écran, et les classes avec breakpoint les remplacent à partir de cette largeur.