Color y fondo (Color and background)
Establece un color de fondo con un color de primer plano contrastante.
Descripción general
Los ayudantes (helpers) de color y fondo combinan el poder de nuestras utilidades .text-* y utilidades .bg-* en una sola clase. Utilizando nuestra función Sass color-contrast(), determinamos automáticamente un color (color) contrastante para un color de fondo (background-color) en 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 la personalización de los colores de nuestro tema a través de variables CSS puede causar problemas de contraste de color con estas utilidades.
<div class="text-bg-primary p-3">Primary con color contrastante</div>
<div class="text-bg-secondary p-3">Secondary con color contrastante</div>
<div class="text-bg-success p-3">Success con color contrastante</div>
<div class="text-bg-danger p-3">Danger con color contrastante</div>
<div class="text-bg-warning p-3">Warning con color contrastante</div>
<div class="text-bg-info p-3">Info con color contrastante</div>
<div class="text-bg-light p-3">Light con color contrastante</div>
<div class="text-bg-dark p-3">Dark con color contrastante</div>Consejo de accesibilidad: El uso del color para agregar significado solo proporciona una indicación visual, que no se transmitirá a los usuarios de tecnologías de asistencia como los lectores de pantalla. Asegúrate de que el significado sea obvio a partir del propio contenido (por ejemplo, el texto visible con un suficiente contraste de color) o se incluya a través de medios alternativos, como texto adicional oculto con la clase .visually-hidden.
Con componentes
Úsalos en lugar de clases combinadas .text-* y .bg-*, como en las insignias (badges):
<span class="badge text-bg-primary">Primario</span>
<span class="badge text-bg-info">Información</span>O en las tarjetas (cards):
Un texto de ejemplo rápido para construir sobre el título de la tarjeta y constituir la mayor parte del contenido de la tarjeta.
Un texto de ejemplo rápido para construir sobre el título de la tarjeta y constituir la mayor parte del contenido de la tarjeta.
<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 construir sobre 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 construir sobre el título de la tarjeta y constituir la mayor parte del contenido de la tarjeta.</p>
</div>
</div>