Kleur & eftergrûn

Stel in eftergrûnkleur yn mei kontrastearjende foargrûnkleur.

Op dizze side

Oersicht

Taheakke yn v5.2.0

Kleur- en eftergrûnhelpers kombinearje de krêft fan ús .text-*nutsbedriuwen en .bg-*nutsbedriuwen yn ien klasse. Mei ús Sass- color-contrast()funksje bepale wy automatysk in kontrast colorfoar in bepaalde background-color.

Heads up! D'r is op it stuit gjin stipe foar in CSS-native color-contrastfunksje, dus wy brûke ús eigen fia Sass. Dit betsjut dat it oanpassen fan ús temakleuren fia CSS-fariabelen kleurkontrastproblemen kin feroarsaakje mei dizze nutsbedriuwen.

Primêr mei kontraste kleur

Sekundêr mei kontraste kleur

Sukses mei kontraste kleur

Gefaar mei kontraste kleur

Warskôging mei kontraste kleur

Info mei kontraste kleur

Ljocht mei kontraste kleur

Dûnker mei kontraste 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>

Mei komponinten

Brûk se yn plak fan kombinearre .text-*en .bg-*klassen, lykas op badges :

Primêr Info

html

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

Of op kaarten :

Koptekst

Guon rappe foarbyldtekst om op 'e kaarttitel te bouwen en it grutste part fan' e kaartynhâld út te meitsjen.

Koptekst

Guon rappe foarbyldtekst om op 'e kaarttitel te bouwen en it grutste part fan' e kaartynhâld út te meitsjen.

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>