7.2 — Couleurs (texte & fond)

⏱️ TL;DR — text-* colore le texte, bg-* le fond, avec les couleurs de thème (primary, secondary, success, danger, warning, info, light, dark). En 5.3, préférez les variantes theme-aware : text-body, text-body-secondary, bg-body-tertiary, et text-bg-* (fond + texte contrasté). Opacité via text-opacity-*, bg-opacity-*.

🎯 Objectifs

• Colorer texte et fonds.
• Utiliser les couleurs adaptatives (dark mode).
• Régler l’opacité.

Couleurs de texte

<p class="text-primary">Primaire</p>
<p class="text-success">Succès</p>
<p class="text-danger">Danger</p>
<p class="text-body">Texte principal (s'adapte au thème)</p>
<p class="text-body-secondary">Texte atténué</p>
<p class="text-muted">Atténué (legacy, préférez text-body-secondary)</p>
<p class="text-white bg-dark">Blanc sur fond sombre</p>

Couleurs de fond

<div class="bg-primary text-white">Fond primaire</div>
<div class="bg-body-tertiary">Fond neutre adaptatif</div>
<div class="bg-success-subtle text-success-emphasis">Fond doux (5.3)</div>

En 5.3, chaque couleur a des variantes -subtle (fond doux) et -emphasis (texte accentué), qui s’adaptent automatiquement au mode clair/sombre.

text-bg-* : le combo pratique

<span class="badge text-bg-warning">Attention</span>
<div class="p-3 text-bg-primary">Fond + texte contrasté d'un coup</div>

text-bg-primary pose le fond et choisit une couleur de texte lisible — évite les erreurs de contraste.

Opacité

<div class="bg-primary bg-opacity-25">25 % opaque</div>
<p class="text-danger text-opacity-50">Texte à 50 %</p>

Liens colorés

<a href="#" class="link-primary">Lien primaire</a>
<a href="#" class="link-danger link-underline-opacity-25">Lien discret</a>

⚠️ Piège — text-muted et les couleurs « en dur » (text-dark) ne s’adaptent pas toujours bien au dark mode. En 5.3, privilégiez text-body, text-body-secondary, bg-body-* et les variantes -subtle/-emphasis, conçues pour les color modes.

💡 Pour un dev React — Ces couleurs sont pilotées par des variables CSS --bs-*. Dans un thème custom, vous redéfinissez ces variables (voir Partie 8) et toutes les classes text-*/bg-* suivent — pas besoin de toucher au markup.

✏️ Exercices

1. Un encadré au fond doux « info » avec un texte accentué assorti.

2. Un badge d’avertissement lisible sans choisir la couleur de texte à la main.

🧠 Quiz de révision

Chapitre suivant : 7.3 — Display, flex & position