Utilitaires

Arrière-plan

Les classes bg-* colorent le fond d’un élément avec une couleur du thème, une teinte douce, un dégradé ou un niveau d’opacité. Associées à text-bg-*, elles garantissent un texte lisible.

Texte lisible sur fond de couleur#

text-bg-* applique le fond et choisit automatiquement un texte blanc ou noir selon le contraste. C’est la façon recommandée de colorer un 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>

Teintes douces#

Les fonds -subtle conviennent aux encarts discrets. Associez-les au texte -emphasis et à la bordure -subtle de la même couleur.

Votre virement de 150 000 FCFA est programmé.

Votre demande de carte est acceptée.

Votre plafond de retrait est presque atteint.

Le paiement de la mensualité a échoué.

<div class="d-flex flex-column gap-2">
  <div class="p-3 bg-primary-subtle text-primary-emphasis border border-primary-subtle rounded">Votre virement de 150 000 FCFA est programmé.</div>
  <div class="p-3 bg-success-subtle text-success-emphasis border border-success-subtle rounded">Votre demande de carte est acceptée.</div>
  <div class="p-3 bg-warning-subtle text-warning-emphasis border border-warning-subtle rounded">Votre plafond de retrait est presque atteint.</div>
  <div class="p-3 bg-danger-subtle text-danger-emphasis border border-danger-subtle rounded">Le paiement de la mensualité a échoué.</div>
</div>

Fonds neutres et du corps de page#

bg-body

bg-body-secondary

bg-body-tertiary

bg-white

bg-black

bg-transparent

<div class="d-flex flex-wrap gap-2">
  <div class="bg-body border p-3">bg-body</div>
  <div class="bg-body-secondary p-3">bg-body-secondary</div>
  <div class="bg-body-tertiary p-3">bg-body-tertiary</div>
  <div class="bg-white border p-3">bg-white</div>
  <div class="bg-black text-white p-3">bg-black</div>
  <div class="bg-transparent border p-3">bg-transparent</div>
</div>

Opacité du fond#

bg-opacity-* règle la variable --bs-bg-opacity. Elle agit sur les fonds de couleur du thème, pas sur les classes -subtle. Chaque pastille est légendée : la valeur ne repose pas sur la couleur seule.

10 %

25 %

50 %

75 %

100 %

<div class="d-flex flex-wrap gap-3">
  <div><div class="bg-primary bg-opacity-10 p-4 rounded"></div><div class="small mt-1">10 %</div></div>
  <div><div class="bg-primary bg-opacity-25 p-4 rounded"></div><div class="small mt-1">25 %</div></div>
  <div><div class="bg-primary bg-opacity-50 p-4 rounded"></div><div class="small mt-1">50 %</div></div>
  <div><div class="bg-primary bg-opacity-75 p-4 rounded"></div><div class="small mt-1">75 %</div></div>
  <div><div class="bg-primary bg-opacity-100 p-4 rounded"></div><div class="small mt-1">100 %</div></div>
</div>

Dégradé#

bg-gradient ajoute un léger dégradé blanc semi-transparent par-dessus la couleur de fond. Combinez-le avec une classe de couleur.

Primaire

Succès

Sombre

<div class="d-flex flex-wrap gap-2">
  <div class="text-bg-primary bg-gradient p-3">Primaire</div>
  <div class="text-bg-success bg-gradient p-3">Succès</div>
  <div class="text-bg-dark bg-gradient p-3">Sombre</div>
</div>

Classes de fond

Classes de fond
Classes	Fond appliqué
`bg-primary`	Bleu `#2B62AA`
`bg-secondary` `bg-success`	Vert `#387A1B` (même couleur)
`bg-info`	Bleu foncé `#0856A1`
`bg-warning`	Jaune `#ffc107`
`bg-danger`	Rouge `#dc3545`
`bg-light`	Gris clair `#EAEBEA`
`bg-dark`	Gris foncé `#212529`
`bg-black` `bg-white`	Noir et blanc
`bg-body`	Couleur de fond de la page (`--bs-body-bg`)
`bg-body-secondary`	Gris `#e9ecef` (`--bs-secondary-bg`)
`bg-body-tertiary`	Gris très clair `#f8f9fa` (`--bs-tertiary-bg`)
`bg-transparent`	Fond transparent
`bg-primary-subtle` `bg-secondary-subtle` `bg-success-subtle` `bg-info-subtle` `bg-warning-subtle` `bg-danger-subtle` `bg-light-subtle` `bg-dark-subtle`	Teinte claire de chaque couleur du thème
`bg-opacity-10` `bg-opacity-25` `bg-opacity-50` `bg-opacity-75` `bg-opacity-100`	Opacité du fond (0,1 ; 0,25 ; 0,5 ; 0,75 ; 1)
`bg-gradient`	Dégradé `--bs-gradient` en image de fond
`text-bg-primary` `text-bg-secondary` `text-bg-success` `text-bg-danger` `text-bg-warning` `text-bg-info` `text-bg-light` `text-bg-dark`	Fond de la couleur et texte contrasté : blanc, sauf noir pour `warning` et `light`

Variables Sass et CSS

Variables Sass et CSS
Variable	Rôle
`$utilities-bg`, `$utilities-bg-colors`	Couleurs proposées par `bg-*` (thème, `black`, `white`, `body`). Créées à partir de `$theme-colors`.
`$utilities-bg-subtle`	Teintes `bg-*-subtle`.
`$theme-colors`	Ajoutez-y une couleur pour obtenir `bg-nom`, `text-bg-nom`, `text-nom` et `border-nom`.
`--bs-primary-rgb`, `--bs-success-rgb`…	Composantes rouge, vert, bleu de chaque couleur ; lues par `bg-*`.
`--bs-bg-opacity`	Opacité du fond (1 par défaut) ; modifiée par `bg-opacity-*`.
`--bs-primary-bg-subtle`, `--bs-success-bg-subtle`…	Couleur des classes `bg-*-subtle`.
`--bs-body-bg`, `--bs-secondary-bg`, `--bs-tertiary-bg`	Fonds de la page et des niveaux secondaire et tertiaire.
`--bs-gradient`	Dégradé utilisé par `bg-gradient`.

Bonnes pratiques

À faire

Préférez text-bg-* : le texte change de couleur avec le fond et reste lisible.
Utilisez les teintes -subtle avec text-*-emphasis pour les messages d’information.
Indiquez aussi l’état par un mot ou une icône, pas seulement par la couleur du fond.

À éviter

N’associez pas à la main bg-warning et text-white : le contraste est insuffisant.
N’utilisez pas bg-opacity-* sous un texte qui doit rester lisible sans vérifier le contraste obtenu.
Ne mélangez pas bg-* et bg-*-subtle sur un même élément : seule une classe l’emporte.

Accessibilité

Un texte normal doit avoir un contraste d’au moins 4,5 : 1 avec son fond ; un grand texte, 3 : 1.
bg-gradient éclaircit le haut du fond : revérifiez le contraste du texte placé dessus.