Couleur et arrière-plan

Définissez une couleur d'arrière-plan avec une couleur de premier plan contrastée.

Sur cette page

Aperçu

Ajouté dans v5.2.0

Les assistants de couleur et d'arrière-plan combinent la puissance de nos .text-*utilitaires et .bg-*utilitaires en une seule classe. En utilisant notre fonction Sass color-contrast(), nous déterminons automatiquement un contraste colorpour un particulier background-color.

La tête haute! Il n'y a actuellement aucun support pour une color-contrastfonction CSS native, nous utilisons donc la nôtre via Sass. Cela signifie que la personnalisation des couleurs de notre thème via des variables CSS peut entraîner des problèmes de contraste de couleur avec ces utilitaires.

Primaire avec couleur contrastée

Secondaire avec couleur contrastante

Succès avec une couleur contrastée

Danger avec couleur contrastante

Avertissement avec couleur contrastante

Info avec couleur contrastante

Léger avec une couleur contrastante

Sombre avec une couleur contrastante

html

<div class="text-bg-primary p-3">Primary with contrasting color</div>
<div class="text-bg-secondary p-3">Secondary with contrasting color</div>
<div class="text-bg-success p-3">Success with contrasting color</div>
<div class="text-bg-danger p-3">Danger with contrasting color</div>
<div class="text-bg-warning p-3">Warning with contrasting color</div>
<div class="text-bg-info p-3">Info with contrasting color</div>
<div class="text-bg-light p-3">Light with contrasting color</div>
<div class="text-bg-dark p-3">Dark with contrasting color</div>

Avec composants

Utilisez-les à la place des combinés .text-*et des .bg-*classes, comme sur les badges :

Primaire Info

html

<span class="badge text-bg-primary">Primary</span>
<span class="badge text-bg-info">Info</span>

Ou sur cartes :

Entête

Quelques exemples de texte rapides à construire sur le titre de la carte et constituant l'essentiel du contenu de la carte.

Entête

Quelques exemples de texte rapides à construire sur le titre de la carte et constituant l'essentiel du contenu de la carte.

html

<div class="card text-bg-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-bg-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>