Color & background

Pone background color cum diversa corporis fabrica.

In hac pagina

Overview

Additur in v5.2.0

Color et color adiutores vim .text-*utilitates et .bg-*utilitates in uno genere coniungunt. Munus nostro Sass utentes color-contrast(), automatice contrariam colorpro particulari statuimus background-color.

Capita! Nunc nulla subsidia pro color-contrastfunctione CSS-nativa adest, ita nostra via Sass utimur. Hoc significat quod customising thematis nostri colores per CSS variabiles colores causare potest quaestiones discrepantias cum his utilitatibus.

Prima est diversa color

Secundarium cum diversa colore

Success per diversa color

Periculo diversa colore

Admonitio ad contraria color

Info in contrarium colore

Lux cum diversa colore

Obscuris varius color

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>

Cum components

Loco mixtis .text-*et .bg-*generibus utere, ut in insigniis :

Primarium Info

html

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

Aut in pecto :

Header

Exemplar aliquod velox exemplum quod in titulo chartae aedificatur et molem contenti chartae componunt.

Header

Exemplar aliquod velox exemplum quod in titulo chartae aedificatur et molem contenti chartae componunt.

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>