Faarf & Hannergrond

Setzt eng Hannergrondfaarf mat contrastéierender Virdergrondfaarf.

Op dëser Säit

Iwwersiicht

Dobäi an v5.2.0

Faarf- an Hannergrondhëllefer kombinéieren d'Kraaft vun eisen .text-*Utilities an .bg-*Utilities an enger Klass. Mat eiser Sass color-contrast()Funktioun bestëmmen mir automatesch e Kontrast colorfir eng bestëmmte background-color.

Kapp erop! Et gëtt de Moment keng Ënnerstëtzung fir eng CSS-gebierteg color-contrastFunktioun, also benotze mir eis eegen iwwer Sass. Dëst bedeit datt d'Personaliséierung vun eisen Thema Faarwen iwwer CSS Variablen Faarfkontrastproblemer mat dësen Utilities verursaache kann.

Primär mat contrastéierend Faarf

Sekundär mat contrastéierend Faarf

Erfolleg mat contrastéierend Faarf

Gefor mat contrastéierend Faarf

Warnung mat contrastéierender Faarf

Info mat contrastéierender Faarf

Liicht mat contrastéierend Faarf

Däischter mat contrastesche Faarf

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>

Mat Komponenten

Benotzt se amplaz vu kombinéierten .text-*a .bg-*Klassen, wéi op Badges :

Primär Info

html

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

Oder op Kaarten :

Header

E puer séier Beispill Text fir op de Kaarttitel ze bauen an de gréissten Deel vum Inhalt vun der Kaart auszemaachen.

Header

E puer séier Beispill Text fir op de Kaarttitel ze bauen an de gréissten Deel vum Inhalt vun der Kaart auszemaachen.

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>