Farve & baggrund

Indstil en baggrundsfarve med kontrasterende forgrundsfarve.

På denne side

Oversigt

Tilføjet i v5.2.0

Farve- og baggrundshjælpere kombinerer kraften fra vores .text-*hjælpeprogrammer og .bg-*hjælpeprogrammer i én klasse. Ved at bruge vores Sass- color-contrast()funktion bestemmer vi automatisk en kontrast colorfor en bestemt background-color.

Heads up! Der er i øjeblikket ingen understøttelse af en CSS-native color-contrastfunktion, så vi bruger vores egen via Sass. Dette betyder, at tilpasning af vores temafarver via CSS-variabler kan forårsage farvekontrastproblemer med disse værktøjer.

Primær med kontrastfarve

Sekundær med kontrastfarve

Succes med kontrastfarve

Fare med kontrastfarve

Advarsel med kontrastfarve

Info med kontrastfarve

Lys med kontrastfarve

Mørk med kontrastfarve

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

Brug dem i stedet for kombineret .text-*og .bg-*klasser, som på badges :

Primær Info

html

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

Eller på kort :

Header

Nogle hurtige eksempeltekster til at bygge videre på kortets titel og udgøre hovedparten af kortets indhold.

Header

Nogle hurtige eksempeltekster til at bygge videre på kortets titel og udgøre hovedparten af kortets indhold.

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>