Skip to Content
BootstrapPartie 8 — Personnalisation avec Sass8.3 — Les maps (couleurs, breakpoints)

8.3 — Les maps (couleurs, breakpoints)

⏱️ TL;DR — Les maps Sass regroupent des ensembles de valeurs. $theme-colors liste les couleurs contextuelles (primary, success…) qui génèrent btn-*, bg-*, text-*, etc. On y ajoute une couleur avec map-merge. $grid-breakpoints et $container-max-widths définissent la grille. $spacers l’échelle d’espacement.

🎯 Objectifs

  • Ajouter une couleur de thème (ex. « brand »).
  • Modifier les breakpoints ou les spacers.
  • Comprendre ce que génère une map.

$theme-colors

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
 
// Ajouter une couleur "brand"
$theme-colors: map-merge($theme-colors, (
  "brand": #7952b3,
  "accent": #ff6b6b
));
 
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/bootstrap";

Cela génère automatiquement : btn-brand, btn-outline-brand, bg-brand, text-brand, border-brand, alert-brand, text-bg-brand, bg-brand-subtle… pour votre nouvelle couleur.

<button class="btn btn-brand">Bouton maison</button>
<span class="badge text-bg-accent">Accent</span>

Modifier les breakpoints

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 1024px,   // modifié
  xl: 1280px,   // modifié
  xxl: 1536px   // modifié
);
$container-max-widths: (
  sm: 540px, md: 720px, lg: 960px, xl: 1200px, xxl: 1440px
);

Utile pour aligner Bootstrap sur les breakpoints d’un design system existant.

Modifier l’échelle d’espacement

$spacers: map-merge($spacers, (
  6: 4rem,
  7: 6rem
));

Ajoute m-6, p-7, etc.

Retirer une entrée

$theme-colors: map-remove($theme-colors, "info", "light");

Supprime info et light (et leurs classes) pour alléger le CSS.

⚠️ Piège — Ajouter une couleur avec map-merge après @import variables mais avant @import maps : c’est l’ordre correct. Si vous le faites après maps, les classes dérivées (subtle, emphasis, text-bg) ne sont pas régénérées.

💡 Pour un dev React — $theme-colors est le pont idéal entre vos design tokens et Bootstrap : déclarez vos couleurs de marque ici, et toute la bibliothèque de composants adopte votre palette. C’est plus robuste que de surcharger des classes au cas par cas.

✏️ Exercices

  1. Ajouter une couleur de thème « tertiary » violette et l’utiliser sur un bouton.

✅ Solution

$theme-colors: map-merge($theme-colors, ("tertiary": #7952b3)); → <button class="btn btn-tertiary">.

  1. Retirer la couleur info du thème.

✅ Solution

$theme-colors: map-remove($theme-colors, "info");.

🧠 Quiz de révision

1. Quelle map liste les couleurs contextuelles ?

$theme-colors.

2. Quelle fonction Sass pour ajouter une entrée à une map ?

map-merge.

3. Qu’obtient-on en ajoutant une couleur à $theme-colors ?

Toutes les classes dérivées (btn-, bg-, text-, text-bg-, -subtle…).

4. Quelle map définit les breakpoints ?

$grid-breakpoints.

5. Comment retirer une couleur du thème ?

map-remove($theme-colors, "nom").

Chapitre suivant : 8.4 — Functions & mixins

8.2 — Variables & options8.4 — Functions & mixins