Culore è fondu

Pone un culore di fondo cun un culore di primu pianu cuntrastanti.

In sta pagina

Panoramica

Aggiuntu in v5.2.0

L'aiutu di u culore è di u fondu combina u putere di e nostre .text-*utilità è .bg-*utilità in una classe. Utilizendu a nostra color-contrast()funzione Sass, determinamu automaticamente un cuntrastu colorper un particulare background-color.

A testa alta ! Attualmente ùn ci hè micca supportu per una color-contrastfunzione nativa CSS, cusì usemu u nostru propiu via Sass. Questu significa chì a persunalizazione di i nostri culori di tema via variabili CSS pò causà prublemi di cuntrastu di culore cù queste utilità.

Primariu cù culore cuntrastanti

Sicundariu cù culore cuntrastanti

Successu cù culore cuntrastanti

Periculu cù culore cuntrastanti

Avvisu cù culore cuntrastanti

Info cun culore cuntrastanti

Luce cù culore cuntrastanti

Scuru cù culore cuntrastanti

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>

Cù cumpunenti

Aduprate à u locu di cumminati .text-*è .bg-*classi, cum'è nantu à i badge :

Primariu Info

html

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

O in carte :

Intestazione

Qualchì testu d'esempiu rapidu per custruisce nantu à u titulu di a carta è custituiscenu a maiò parte di u cuntenutu di a carta.

Intestazione

Qualchì testu d'esempiu rapidu per custruisce nantu à u titulu di a carta è custituiscenu a maiò parte di u cuntenutu di a 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>