Bootstrap 5.2 / Helpers

Kleur & achtergrond

Stel een achtergrondkleur in met een contrasterende voorgrondkleur.

Overzicht

Nieuw in v5.2.0

Kleur- en achtergrond-helpers combineren de kracht van onze .text-*-utilities en .bg-*-utilities in één klasse. Met onze Sass-functie color-contrast() bepalen we automatisch een contrasterende color bij een bepaalde background-color.

Let op

Let op! Er is momenteel geen ondersteuning voor een CSS-native color-contrast-functie, dus gebruiken we onze eigen variant via Sass. Dit betekent dat het aanpassen van onze themakleuren via CSS-variabelen kleurcontrastproblemen kan veroorzaken bij deze utilities.

HTML

<div class="text-bg-primary p-3">Primary met contrasterende kleur</div>

<div class="text-bg-secondary p-3">Secondary met contrasterende kleur</div>

<div class="text-bg-success p-3">Success met contrasterende kleur</div>

<div class="text-bg-danger p-3">Danger met contrasterende kleur</div>

<div class="text-bg-warning p-3">Warning met contrasterende kleur</div>

<div class="text-bg-info p-3">Info met contrasterende kleur</div>

<div class="text-bg-light p-3">Light met contrasterende kleur</div>

<div class="text-bg-dark p-3">Dark met contrasterende kleur</div>

Met componenten

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

HTML

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

Of bij cards:

HTML

<div class="card text-bg-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Kop</div>
  <div class="card-body">
    <p class="card-text">Wat korte voorbeeldtekst om voort te bouwen op de card-titel en het grootste deel van de inhoud van de card te vormen.</p>
  </div>
</div>
<div class="card text-bg-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Kop</div>
  <div class="card-body">
    <p class="card-text">Wat korte voorbeeldtekst om voort te bouwen op de card-titel en het grootste deel van de inhoud van de card te vormen.</p>
  </div>
</div>