Farge og bakgrunn

Angi en bakgrunnsfarge med kontrasterende forgrunnsfarge.

På denne siden

Oversikt

Lagt til i v5.2.0

Farge- og bakgrunnshjelpere kombinerer kraften til våre .text-*hjelpemidler og .bg-*hjelpemidler i én klasse. Ved å bruke Sass- color-contrast()funksjonen bestemmer vi automatisk en kontrast colorfor en bestemt background-color.

Vær oppmerksom! Det er for øyeblikket ingen støtte for en CSS-native color-contrastfunksjon, så vi bruker vår egen via Sass. Dette betyr at tilpasning av temafargene våre via CSS-variabler kan forårsake fargekontrastproblemer med disse verktøyene.

Primær med kontrastfarge

Sekundær med kontrastfarge

Suksess med kontrastfarger

Fare med kontrastfarge

Advarsel med kontrastfarge

Info med kontrastfarge

Lys med kontrastfarge

Mørk med kontrastfarge

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>

Med komponenter

Bruk dem i stedet for kombinert .text-*og .bg-*klasser, som på merker :

Hoved Info

html

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

Eller på kort :

Overskrift

Noen raske eksempeltekster for å bygge på korttittelen og utgjøre hoveddelen av kortets innhold.

Overskrift

Noen raske eksempeltekster for å bygge på korttittelen og utgjøre hoveddelen av kortets innhold.

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>