Aides

Couleur et arrière-plan

Les classes .text-bg-* appliquent d’un coup un fond de couleur du thème et un texte au contraste suffisant. Elles évitent d’assortir couleur et fond à la main, avec le risque d’un texte illisible.

Chaque classe .text-bg-{couleur} fixe le fond sur la couleur du thème et calcule automatiquement la couleur de texte (blanc ou noir) qui offre le meilleur contraste. Utilisez-les pour des pastilles de statut, des bandeaux, des en-têtes de bloc ou des étiquettes.

Toutes les couleurs#

Une classe par couleur du thème. Le texte passe tout seul en blanc ou en noir selon le fond.

Primaire

Secondaire

Succès

Danger

Avertissement

Information

Clair

Sombre

<div class="d-flex flex-wrap gap-2">
  <div class="text-bg-primary p-3">Primaire</div>
  <div class="text-bg-secondary p-3">Secondaire</div>
  <div class="text-bg-success p-3">Succès</div>
  <div class="text-bg-danger p-3">Danger</div>
  <div class="text-bg-warning p-3">Avertissement</div>
  <div class="text-bg-info p-3">Information</div>
  <div class="text-bg-light p-3">Clair</div>
  <div class="text-bg-dark p-3">Sombre</div>
</div>

Statuts de virement#

Les classes fonctionnent aussi sur des éléments en ligne, comme les badges.

Exécuté Loyer de mars : 150 000 FCFA
En attente Cotisation tontine : 25 000 FCFA
Rejeté Virement vers un compte clôturé

<ul class="list-unstyled vstack gap-2 mb-0">
  <li><span class="badge text-bg-success">Exécuté</span> Loyer de mars : 150 000 FCFA</li>
  <li><span class="badge text-bg-warning">En attente</span> Cotisation tontine : 25 000 FCFA</li>
  <li><span class="badge text-bg-danger">Rejeté</span> Virement vers un compte clôturé</li>
</ul>

Avec un lien à l'intérieur#

Un lien dans un bloc coloré garde sa propre couleur : ajoutez .link-light ou .link-dark pour qu’il reste lisible.

Votre plafond de carte a changé. Consulter le détail

Votre dossier de prêt est incomplet. Ajouter une pièce

<div class="text-bg-primary p-3">
  Votre plafond de carte a changé.
  <a href="#" class="link-light">Consulter le détail</a>
</div>
<div class="text-bg-warning p-3 mt-2">
  Votre dossier de prêt est incomplet.
  <a href="#" class="link-dark">Ajouter une pièce</a>
</div>

Classes et variables

Classes et variables
Classe	Fond	Texte
`.text-bg-primary`	Bleu BDU `#2B62AA`	Blanc
`.text-bg-secondary`, `.text-bg-success`	Vert `#387A1B`	Blanc
`.text-bg-danger`	Rouge du thème	Calculé selon le contraste
`.text-bg-warning`	Jaune du thème	Noir
`.text-bg-info`	Bleu foncé `#0856A1`	Blanc
`.text-bg-light`	Gris `#EAEBEA`	Noir
`.text-bg-dark`	Sombre du thème	Blanc
`--bs-bg-opacity`	Opacité du fond (1 par défaut)	Se règle avec .bg-opacity-*.
`$theme-colors`	Carte Sass : une classe est générée par entrée	Voir Cartes Sass.

Bonnes pratiques

À faire

Préférez .text-bg-* à une association manuelle de .bg-* et .text-*.
Utilisez .link-light ou .link-dark pour les liens placés dans un bloc coloré.

À éviter

Ne transmettez pas une information par la seule couleur : ajoutez un libellé (« Rejeté », « En attente »).
Ne forcez pas une couleur de texte avec .text-* sur un .text-bg-* : vous perdez le contraste garanti.

Accessibilité

Le contraste du texte est calculé selon la couleur de fond, ce qui aide à respecter le ratio de 4,5:1.
Si vous baissez l’opacité du fond avec .bg-opacity-*, revérifiez le contraste.