Color y fondo

Establezca un color de fondo con un color de primer plano que contraste.

En esta página

Visión general

Añadido en v5.2.0

Los ayudantes de color y fondo combinan el poder de nuestras .text-*utilidades y .bg-*utilidades en una sola clase. Usando nuestra función Sass color-contrast(), determinamos automáticamente un contraste colorpara un archivo background-color.

¡Aviso! Actualmente no hay soporte para una color-contrastfunción nativa de CSS, por lo que usamos la nuestra a través de Sass. Esto significa que personalizar los colores de nuestro tema a través de variables CSS puede causar problemas de contraste de color con estas utilidades.

Primaria con color contrastante

Secundaria con color contrastante

Éxito con color contrastante

Peligro con color contrastante

Advertencia con color de contraste

Info con color contrastante

Luz con color contrastante

Oscuro con color 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 componentes

Úselos en lugar de combinados .text-*y .bg-*clases, como en las insignias :

Información principal

html

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

O en tarjetas :

Encabezamiento

Un texto de ejemplo rápido para construir sobre el título de la tarjeta y componer la mayor parte del contenido de la tarjeta.

Encabezamiento

Un texto de ejemplo rápido para construir sobre el título de la tarjeta y componer la mayor parte del contenido de la tarjeta.

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>