Color y fondo
Establece un color de fondo con un color de primer plano que contraste.
Descripción general
Los ayudantes de color y fondo combinan el poder de nuestras .text-*
(utilidades) y .bg-*
(utilidades) en una clase. Usando nuestra función Sass color-contrast()
, 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, por lo que usamos la nuestra a través de Sass. Esto significa que personalizar los colores de nuestro tema mediante variables CSS puede causar problemas de contraste de color con estas utilidades.
<div class="text-bg-primary p-3">Primaria con color contrastante</div>
<div class="text-bg-secondary p-3">Secundaria con color contrastante</div>
<div class="text-bg-success p-3">Éxito con color contrastante</div>
<div class="text-bg-danger p-3">Peligro con color contrastante</div>
<div class="text-bg-warning p-3">Advertencia con color contrastante</div>
<div class="text-bg-info p-3">Información con color contrastante</div>
<div class="text-bg-light p-3">Claro con color contrastante.</div>
<div class="text-bg-dark p-3">Oscuro con color contrastante.</div>
Consejo de accesibilidad: El uso de colores para agregar 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 a partir del contenido mismo (por ejemplo, el texto visible con un suficiente contraste de color) o se incluye a través de medios alternativos, como texto adicional oculto con la clase .visually-hidden
.
Con componentes
Úsalos en lugar de las clases combinadas .text-*
y .bg-*
, como en insignias:
<span class="badge text-bg-primary">Primary</span>
<span class="badge text-bg-info">Info</span>
O en tarjetas:
<div class="card text-bg-primary mb-3" style="max-width: 18rem;">
<div class="card-header">Encabezado</div>
<div class="card-body">
<p class="card-text">Un texto de ejemplo rápido para desarrollar el título de la tarjeta y constituir la
mayor parte del contenido de la tarjeta.</p>
</div>
</div>
<div class="card text-bg-info mb-3" style="max-width: 18rem;">
<div class="card-header">Encabezado</div>
<div class="card-body">
<p class="card-text">Un texto de ejemplo rápido para desarrollar el título de la tarjeta y constituir la
mayor parte del contenido de la tarjeta.</p>
</div>
</div>