Koulè & background

Mete yon koulè background ak koulè premye plan kontraste.

Nan paj sa a

Apèsi sou lekòl la

Te ajoute nan v5.2.0

Koulè ak asistan background konbine pouvwa .text-*sèvis piblik nou yo ak .bg-*sèvis piblik yo nan yon klas. Sèvi ak fonksyon Sass nou color-contrast()an, nou otomatikman detèmine yon kontras colorpou yon patikilye background-color.

Tèt leve! Kounye a pa gen sipò pou yon color-contrastfonksyon CSS natif natal, kidonk nou itilize pwòp pa nou atravè Sass. Sa vle di ke pèsonalizasyon koulè tèm nou yo atravè varyab CSS ka lakòz pwoblèm kontras koulè ak sèvis piblik sa yo.

Prensipal ak koulè kontras

Segondè ak koulè kontras

Siksè ak koulè contraste

Danje ak koulè kontras

Avètisman ak koulè kontras

Enfòmasyon ak koulè kontras

Limyè ak koulè kontras

Fè nwa ak koulè contraste

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>

Avèk konpozan

Sèvi ak yo nan plas konbine .text-*ak .bg-*klas, tankou sou badj :

Prensipal Info

html

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

Oswa sou kat :

Header

Kèk egzanp tèks rapid pou konstwi sou tit kat la epi fè gwo kantite kontni kat la.

Header

Kèk egzanp tèks rapid pou konstwi sou tit kat la epi fè gwo kantite kontni kat la.

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>