Färg & bakgrund

Ställ in en bakgrundsfärg med kontrasterande förgrundsfärg.

På den här sidan

Översikt

Lades till i v5.2.0

Färg- och bakgrundshjälpmedel kombinerar kraften i våra .text-*verktyg och .bg-*verktyg i en klass. Med vår Sass- color-contrast()funktion bestämmer vi automatiskt en kontrast colorför en viss background-color.

Se upp! Det finns för närvarande inget stöd för en CSS-native color-contrastfunktion, så vi använder vår egen via Sass. Det betyder att anpassning av våra temafärger via CSS-variabler kan orsaka färgkontrastproblem med dessa verktyg.

Primär med kontrasterande färg

Sekundär med kontrasterande färg

Framgång med kontrasterande färg

Fara med kontrasterande färg

Varning med kontrasterande färg

Info med kontrasterande färg

Ljus med kontrasterande färg

Mörk med kontrasterande färg

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

Använd dem istället för kombinerade .text-*och .bg-*klasser, som på märken :

Primär Info

html

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

Eller på kort :

Rubrik

Lite snabb exempeltext för att bygga vidare på korttiteln och utgöra huvuddelen av kortets innehåll.

Rubrik

Lite snabb exempeltext för att bygga vidare på korttiteln och utgöra huvuddelen av kortets innehåll.

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>