Color y fondo

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

On this page

Descripción general

Añadido en v5.2.0

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>

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 card y formar la mayor parte del contenido de la card.

Encabezado

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

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>