Colores y fondos
En Bootstrap, el sistema de colores es semántico (basado en el significado/emoción) y no en el nombre del color (no verás "red" o "blue", sino "danger" o "primary")
La Paleta Base (El significado de los colores)
Los nombres que emplea Bootstrap para identificar los colores tanto para el texto como para el fondo son:
- primary (Azul): La acción principal.
- secondary (Gris): Acciones secundarias.
- success (Verde): Éxito, confirmación, completado.
- danger (Rojo): Error, borrar, alerta crítica.
- warning (Amarillo/Naranja): Advertencia, atención.
- info (Cian): Información neutral.
- light (Gris muy claro): Fondos claros.
- dark (Negro/Gris muy oscuro): Textos oscuros o pies de página.
Colores de texto
Para cambiarle el color a una fuente tenemos:
- Colores base: text-primary, text-success, text-danger, etc.
- Monocromáticos: text-black: Negro puro, text-white: Blanco puro.
- Jerarquía: text-body: El color de texto predeterminado (normalmente negro oscuro). text-body-secondary: Color grisáceo para textos menos importantes, fechas o metadatos.
Colores de fondo
Para darle color de fondo a un elemento con Bootstrap tenemos:
- Sólidos: bg-primary, bg-dark, bg-warning...
- Degradado sutil: Si añades la clase bg-gradient junto al color, Bootstrap añade un degradado lineal muy suave que le da un toque "3D" moderno.
Colores Subtle (sutiles)
Antes, si usabas bg-success (verde fuerte), el texto negro no se leía bien y el blanco a veces molestaba. Bootstrap 5.3 introdujo los fondos sutiles (pasteles) y los textos de énfasis. Son perfectos para alertas y tarjetas modernas.
- Fondo: bg-primary-subtle (Un azul muy clarito).
- Texto/Borde: text-primary-emphasis (Un azul oscuro y legible).
- Borde: border-primary-subtle.
Opacidad
Podemos utilizar las utilidades de opacidad para modificar por ejemplo que el fondo de un elemento no nos oculte un texto.
- Opacidad de fondo: bg-opacity-10, bg-opacity-25, bg-opacity-50, bg-opacity-75.
- Opacidad de texto: text-opacity-50
text-bg-*
A veces es molesto poner un bg-primary y darte cuenta que el texto negro no se lee, y tener que añadir un text-white manualmente.
Bootstrap tiene unos ayudantes que configuran fondo y color de texto automáticamente para garantizar contraste.
- text-bg-primary: Pone fondo azul Y texto blanco automáticamente.
- text-bg-light: Pone fondo gris claro Y texto negro.