Color & background a awm bawk

Background color chu foreground color danglam tak nen set rawh.

He page ah hian

A tlangpuiin

v5.2.0 ah dah belh a ni

.text-*Color leh background helper te hian kan utilities leh .bg-*utilities te thiltihtheihna chu class khatah an dah khawm a. Kan Sass function hmang hian a bik takin color-contrast()contrasting kan siam chhuak nghal vek a ni .colorbackground-color

Lu a ti sang a! Tunah hian CSS-native color-contrastfunction support a awm lo a, chuvangin Sass hmangin kan ta kan hmang a ni. Chumi awmzia chu CSS variable hmanga kan theme colors customize hian heng utilities te nen hian color contrast issue a thlen thei tihna a ni.

Primary a ni a, a rawng pawh a danglam hle

Secondary a ni a, a rawng pawh a danglam hle

Hlawhtlinna leh contrasting color

Hlauhawm leh rawng danglam tak

Warning chu a rawng danglam tak nen

Info a rawng hrang hrang a awm

Light leh a rawng danglam tak

Dark a ni a, a rawng pawh a danglam hle

html tih a ni

<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>

Components te nen

.text-*Combined leh .bg-*class aiah hmang la , badge -a awm ang chi :

Hmasa ber Info

html tih a ni

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

A nih loh leh card -ah te :

Header a ni

Card title-a siam tur leh card-a thu awm tam zawk siam turin quick example text thenkhat.

Header a ni

Card title-a siam tur leh card-a thu awm tam zawk siam turin quick example text thenkhat.

html tih a ni

<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>