Amadede & megbenyawo

Ðo megbe amadede si me ŋgɔgbe amadede si to vovo le.

Le axa sia dzi

Kpɔɖeŋunyagbɔgblɔ

Wotsɔe kpe ɖe eŋu le v5.2.0 me

Color and background helpers combine the power of our .text-* utilities and .bg-* utilities in one class. Using our Sass color-contrast() function, we automatically determine a contrasting color for a particular background-color.

Heads up! There’s currently no support for a CSS-native color-contrast function, so we use our own via Sass. This means that customizing our theme colors via CSS variables may cause color contrast issues with these utilities.

Primary with contrasting color

Secondary with contrasting color

Success with contrasting color

Danger with contrasting color

Warning with contrasting color

Info with contrasting color

Light with contrasting color

Viviti kple amadede si to vovo

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>

Le akpa aɖewo me

Zã wo ɖe combined .text-*kple .bg-*classes teƒe, abe le akɔtagbalẽviwo dzi ene :

Nyatakaka Gbãtɔ

html

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

Alo le agbalẽviwo dzi :

Tanya ƒe tanya

Kpɔɖeŋu nuŋɔŋlɔ aɖewo kabakaba be woatu ɖe agbalẽvia ƒe tanya dzi eye woawɔ agbalẽvia me nyawo ƒe akpa gãtɔ.

Tanya ƒe tanya

Kpɔɖeŋu nuŋɔŋlɔ aɖewo kabakaba be woatu ɖe agbalẽvia ƒe tanya dzi eye woawɔ agbalẽvia me nyawo ƒe akpa gãtɔ.

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>