Color y fondo

Establece un color de fondo con un color de primer plano de contraste.

On this page

Descripción general

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

¡Atención! Actualmente no hay soporte para una función color-contrast nativa de CSS, así que usamos la nuestra vía Sass. Esto significa que personalizar los colores de nuestro tema vía variables CSS puede causar problemas de contraste de color con estas utilidades.

Primary con color de contraste

Secondary con color de contraste

Success con color de contraste

Danger con color de contraste

Warning con color de contraste

Info con color de contraste

Light con color de contraste

Dark con color de contraste

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>

Consejo de accesibilidad: Usar color para añadir significado solo proporciona una indicación visual, que no se transmitirá a los usuarios de tecnologías de asistencia como lectores de pantalla. Asegúrate de que el significado sea obvio por el contenido mismo (p. ej., el texto visible con un suficiente contraste de color) o se incluya mediante medios alternativos, como texto adicional oculto con la clase .visually-hidden.

Con componentes

Úsalas en lugar de las clases combinadas .text-* y .bg-*, como en los badges:

Primary Info

html

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

O en las cards:

Encabezado

Algún texto de ejemplo rápido para construir sobre el título de la tarjeta y formar la mayor parte del contenido de la tarjeta.

Encabezado

Algún texto de ejemplo rápido para construir sobre el título de la tarjeta y formar 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>