Kɔlɔ & bakgrɔn

Set wan bakgrɔn kɔlɔ wit kɔntrast fɔgrɔn kɔlɔ.

Na dis pej

Ɔvaviu fɔ di Baybul

Dɛn ad am na v5.2.0

Kɔlɔ ɛn bakgrɔn ɛp dɛn kin jɔyn di pawa we wi .text-*yutiliti ɛn .bg-*yutiliti dɛn gɛt na wan klas. Yuz wi Sass color-contrast()fɛnshɔn, wi kin ɔtomɛtik ditarmin wan kɔntrast colorfɔ wan patikyula background-color.

Hed dɛn de ɔp! Naw, no sɔpɔt nɔ de fɔ wan CSS-nativ color-contrastfɛnshɔn, so wi de yuz wi yon via Sass. Dis min se fɔ kɔstɔmayz wi tim kɔlɔ dɛn bay CSS vɛriɔbul dɛn kin mek kɔlɔ kɔntrast prɔblɛm wit dɛn yutiliti dɛn ya.

Praymari wit difrɛn kɔlɔ

Sɛkɔndari wit difrɛn kɔlɔ

Sakses wit difrɛn kɔlɔ

Denja wit difrɛn kɔlɔ

Wonin wit difrɛn kɔlɔ

Info wit kontrastin kala

Layt wit difrɛn kɔlɔ

Dak wit difrɛn kɔlɔ

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>

Wit di komponent dɛn

Yuz dɛn insay ples fɔ kɔmbayn .text-*ɛn .bg-*klas, lɛk pan badge dɛn :

Fɔs Info

html

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

Ɔ na kad dɛn :

Ɛda fɔ di ed

Sɔm kwik ɛgzampul tɛks fɔ bil pan di kad taytul ɛn mek di bɔku pan di tin dɛn we de insay di kad.

Ɛda fɔ di ed

Sɔm kwik ɛgzampul tɛks fɔ bil pan di kad taytul ɛn mek di bɔku pan di tin dɛn we de insay di kad.

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>