Bootstrap4 Colores
Bootstrap 4 proporciona algunas clases de colores con significado:.text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark and .text-light:
Ejemplo
<div class="container">
<h2>Colores de texto con significado específico</h2>
<p class="text-muted">Texto suave.</p>
<p class="text-primary">Texto importante.</p>
<p class="text-success">Texto de éxito.</p>
<p class="text-info">Texto informativo.</p>
<p class="text-warning">Texto de advertencia.</p>
<p class="text-danger">Texto de peligro.</p>
<p class="text-secondary">Subtítulo.</p>
<p class="text-dark">Texto gris oscuro.</p>
<p class="text-light">Texto gris claro (difícil de ver sobre fondo blanco).</p>
<p class="text-white">Texto blanco (difícil de ver sobre fondo blanco).</p>
</div>
Pruébalo »
Usar en enlaces
Ejemplo
<div class="container">
<h2>Color de texto</h2>
<p>Pase el ratón sobre el enlace.</p>
<a href="#" class="text-muted">Enlace suave.</a>
<a href="#" class="text-primary">Enlace primario.</a>
<a href="#" class="text-success">Enlace de éxito.</a>
<a href="#" class="text-info">Enlace informativo.</a>
<a href="#" class="text-warning">Enlace de advertencia.</a>
<a href="#" class="text-danger">Enlace de peligro.</a>
<a href="#" class="text-secondary">Enlace secundario.</a>
<a href="#" class="text-dark">Enlace gris oscuro.</a>
<a href="#" class="text-light">Enlace gris claro.</a>
</div>
Pruébalo »
Color de fondo
Las clases que proporcionan colores de fondo son:.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-darky.bg-light。
Nota: el color de fondo no establece el color del texto; en algunos ejemplos necesitará usarlo junto con.text-*la clase.
Ejemplo
<div class="container">
<h2>Colores de fondo</h2>
<p class="bg-primary text-white">Color de fondo importante.</p>
<p class="bg-success text-white">Color de fondo de éxito.</p>
<p class="bg-info text-white">Color de fondo informativo.</p>
<p class="bg-warning text-white">Color de fondo de advertencia.</p>
<p class="bg-danger text-white">Color de fondo de peligro.</p>
<p class="bg-secondary text-white">Color de fondo secundario.</p>
<p class="bg-dark text-white">Color de fondo gris oscuro.</p>
<p class="bg-light text-dark">Color de fondo gris claro.</p>
</div>
Pruébalo »