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.
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 mismo (por ejemplo, el texto visible) o se incluya a través de medios alternativos, como texto adicional oculto con la .sr-onlyclase.
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.
<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.
<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 true(el valor predeterminado es false), puede usar .bg-gradient-clases de utilidad. Conozca nuestras opciones de Sass para habilitar estas clases y más.
.bg-gradient-primary.bg-gradient-secondary.bg-gradient-success.bg-gradient-danger.bg-gradient-warning.bg-gradient-info.bg-gradient-light.bg-gradient-dark