Colore e sfondo

Imposta un colore di sfondo con un colore di primo piano contrastante.

Su questa pagina

Panoramica

Aggiunto nella v5.2.0

Gli aiutanti del colore e dello sfondo combinano la potenza delle nostre .text-*utilità e .bg-*utilità in un'unica classe. Usando la nostra funzione Sass color-contrast(), determiniamo automaticamente un contrasto colorper un particolare background-color.

Dritta! Al momento non c'è supporto per una color-contrastfunzione nativa CSS, quindi utilizziamo la nostra tramite Sass. Ciò significa che la personalizzazione dei colori del nostro tema tramite le variabili CSS può causare problemi di contrasto del colore con queste utilità.

Primaria con colore a contrasto

Secondario con colore a contrasto

Successo con colori contrastanti

Pericolo con colore a contrasto

Avvertimento con colore a contrasto

Info con colore a contrasto

Luce con colore a contrasto

Scuro con colore a contrasto

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>

Con componenti

Usali al posto di combinati .text-*e .bg-*classi, come sui badge :

Primario Informazioni

html

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

Oppure su carte :

Intestazione

Un breve testo di esempio per costruire sul titolo della carta e costituire la maggior parte del contenuto della carta.

Intestazione

Un breve testo di esempio per costruire sul titolo della carta e costituire la maggior parte del contenuto della carta.

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>