Source

Colores

Transmita significado a través del color con un puñado de clases de utilidad de color. También incluye soporte para diseñar enlaces con estados de desplazamiento.

Color

.texto-primario

.texto-secundario

.texto-éxito

.text-peligro

.text-advertencia

.text-info

.texto-luz

.text-oscuro

.texto-cuerpo

.texto-silenciado

.texto-blanco

.texto-negro-50

.texto-blanco-50

<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning">.text-warning</p>
<p class="text-info">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-body">.text-body</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>
<p class="text-black-50">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</p>

Las clases de texto contextual también funcionan bien en anclas con los estados de enfoque y desplazamiento proporcionados. Tenga en cuenta que la clase .text-whitey .text-mutedno tiene un estilo de enlace adicional más allá del subrayado.

Enlace de advertencia

Enlace de información

<p><a href="#" class="text-primary">Primary link</a></p>
<p><a href="#" class="text-secondary">Secondary link</a></p>
<p><a href="#" class="text-success">Success link</a></p>
<p><a href="#" class="text-danger">Danger link</a></p>
<p><a href="#" class="text-warning">Warning link</a></p>
<p><a href="#" class="text-info">Info link</a></p>
<p><a href="#" class="text-light bg-dark">Light link</a></p>
<p><a href="#" class="text-dark">Dark link</a></p>
<p><a href="#" class="text-muted">Muted link</a></p>
<p><a href="#" class="text-white bg-dark">White link</a></p>

Color de fondo

Similar a las clases de color de texto contextual, establezca fácilmente el fondo de un elemento en cualquier clase contextual. Los componentes de anclaje se oscurecerán al pasar el mouse, al igual que las clases de texto. Las utilidades en segundo plano no se configurancolor , por lo que en algunos casos querrá usar .text-*utilidades.

.bg-primario

.bg-secundario

.bg-éxito

.bg-peligro

.bg-advertencia

.bg-info

.bg-luz

.bg-oscuro

.bg-blanco

.bg-transparente

<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
<div class="p-3 mb-2 bg-info text-white">.bg-info</div>
<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
<div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>

Gradiente de fondo

Cuando $enable-gradientsse establece en verdadero, podrá usar .bg-gradient-clases de utilidad. De forma predeterminada, $enable-gradientsestá deshabilitado y el ejemplo a continuación se rompe intencionalmente. Esto se hace para facilitar la personalización desde el momento en que comienza a usar Bootstrap. Conozca nuestras opciones de Sass para habilitar estas clases y más.

.bg-gradiente-primario

.bg-gradiente-secundario

.bg-gradiente-éxito

.bg-gradiente-peligro

.bg-gradiente-advertencia

.bg-gradiente-info

.bg-gradient-light

.bg-gradiente-oscuro

<div class="p-3 mb-2 bg-gradient-primary text-white">.bg-gradient-primary</div>
<div class="p-3 mb-2 bg-gradient-secondary text-white">.bg-gradient-secondary</div>
<div class="p-3 mb-2 bg-gradient-success text-white">.bg-gradient-success</div>
<div class="p-3 mb-2 bg-gradient-danger text-white">.bg-gradient-danger</div>
<div class="p-3 mb-2 bg-gradient-warning text-dark">.bg-gradient-warning</div>
<div class="p-3 mb-2 bg-gradient-info text-white">.bg-gradient-info</div>
<div class="p-3 mb-2 bg-gradient-light text-dark">.bg-gradient-light</div>
<div class="p-3 mb-2 bg-gradient-dark text-white">.bg-gradient-dark</div>

Tratar con la especificidad

A veces, las clases contextuales no se pueden aplicar debido a la especificidad de otro selector. En algunos casos, una solución alternativa suficiente es envolver el contenido de su elemento en un <div>con la clase.

Transmitir significado a las tecnologías de asistencia

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úrese de que la información indicada por el color sea obvia a partir del contenido en sí (por ejemplo, el texto visible) o se incluya a través de medios alternativos, como texto adicional oculto con la .sr-onlyclase.