Cor e fondo

Establece unha cor de fondo cunha cor de primeiro plano contrastante.

Nesta páxina

Visión xeral

Engadido na v5.2.0

Os axudantes de cor e fondo combinan o poder das nosas .text-*utilidades e .bg-*utilidades nunha soa clase. Usando a nosa función Sass color-contrast(), determinamos automaticamente un contraste colorpara un background-color.

Aviso! Actualmente non hai soporte para unha color-contrastfunción nativa de CSS, polo que usamos a nosa a través de Sass. Isto significa que a personalización das cores do noso tema mediante variables CSS pode causar problemas de contraste de cores con estas utilidades.

Primaria con cor contrastada

Secundaria con cor contrastada

Éxito con cor contrastante

Perigo con cor contrastada

Aviso con cor contrastada

Información con cor contrastada

Luz con cor contrastada

Escura con cor contrastante

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>

Con compoñentes

Utilízaos en lugar das clases combinadas .text-*e das .bg-*clases, como nas insignias :

Primaria Información

html

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

Ou nas tarxetas :

Cabeceira

Algún texto de exemplo rápido para construír o título da tarxeta e facer a maior parte do contido da tarxeta.

Cabeceira

Algún texto de exemplo rápido para construír o título da tarxeta e facer a maior parte do contido da tarxeta.

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>