Colores de Bootstrap5
Bootstrap 5 proporciona algunas clases de colores representativas:.text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark, .text-body(color predeterminado, negro) y.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 de información.</p>
<p class="text-warning">Texto de advertencia.</p>
<p class="text-danger">Texto de peligro.</p>
<p class="text-secondary">Secundario.</p>
<p class="text-dark">Texto gris oscuro.</p>
<p class="text-body">Color predeterminado, negro.</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 »
Puede establecer la opacidad del color del texto al 50% usando.text-black-50o.text-white-50la clase:
Ejemplo
<p class="text-black-50">Texto negro con 50% de opacidad, sobre fondo blanco.</p>
<p class="text-white-50 bg-dark">Texto blanco con 50% de opacidad, sobre fondo negro.</p>
Pruébalo »
Usar en enlaces
Ejemplo
<div class="container">
<h2>Color de texto</h2>
<p>Pasa el mouse sobre el enlace.</p>
<a href="#" class="text-muted">Enlace suave.</a>
<a href="#" class="text-primary">Enlace principal.</a>
<a href="#" class="text-success">Enlace de éxito.</a>
<a href="#" class="text-info">Enlace de información.</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 necesita usar.text-*junto con la clase.
Ejemplo
<div class="container">
<h2>Color 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 de información.</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 negro.</p>
<p class="bg-light text-dark">Color de fondo gris claro.</p>
</div>
Pruébalo »