Kleur & achtergrond

Stel een achtergrondkleur in met een contrasterende voorgrondkleur.

Op deze pagina

Overzicht

Toegevoegd in v5.2.0

Kleur- en achtergrondhelpers combineren de kracht van onze .text-*hulpprogramma's en .bg-*hulpprogramma's in één klasse. Met behulp van onze Sass- color-contrast()functie bepalen we automatisch een contrast colorvoor een bepaald background-color.

Kop op! Er is momenteel geen ondersteuning voor een CSS-native color-contrastfunctie, dus gebruiken we onze eigen via Sass. Dit betekent dat het aanpassen van onze themakleuren via CSS-variabelen kleurcontrastproblemen kan veroorzaken bij deze hulpprogramma's.

Primair met contrasterende kleur

Secundair met contrasterende kleur

Succes met contrasterende kleur

Gevaar met contrasterende kleur

Waarschuwing met contrasterende kleur

Info met contrasterende kleur

Licht met contrasterende kleur

Donker met contrasterende kleur

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>

Met componenten

Gebruik ze in plaats van gecombineerd .text-*en .bg-*klassen, zoals op badges :

primair Info

html

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

Of op kaarten :

kop

Een korte voorbeeldtekst om op de titel van de kaart voort te bouwen en het grootste deel van de inhoud van de kaart te vormen.

kop

Een korte voorbeeldtekst om op de titel van de kaart voort te bouwen en het grootste deel van de inhoud van de kaart te vormen.

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>