Bootstrap Background Color & text color

Bootstrap es un framework CSS popular que proporciona clases utilitarias para manejar colores de fondo y texto, facilitando el diseño de interfaces web.

Background Color en Bootstrap

Bootstrap ofrece clases predefinidas para aplicar colores de fondo. Las clases siguen el patrón bg-{color}, donde {color} es el nombre del color.

Colores principales:

• bg-primary: Aplica el color principal (generalmente azul).
• bg-secondary: Color secundario (gris).
• bg-success: Verde, normalmente usado para indicar éxito.
• bg-danger: Rojo, usado para alertas o errores.
• bg-warning: Amarillo, usado para advertencias.
• bg-info: Cian, para información.
• bg-light: Fondo claro.
• bg-dark: Fondo oscuro.
• bg-white: Fondo blanco.

Ejemplos:

<div class="bg-primary text-white">Fondo azul con texto blanco</div>
<div class="bg-success text-white">Fondo verde de éxito</div>
<div class="bg-danger text-white">Fondo rojo para advertencias o errores</div>

Text Color en Bootstrap

Bootstrap también proporciona clases para establecer el color del texto. Siguen el patrón text-{color}.

Colores principales:

• text-primary: Texto en el color principal (azul).
• text-secondary: Texto en color secundario (gris).
• text-success: Texto verde.
• text-danger: Texto rojo.
• text-warning: Texto amarillo.
• text-info: Texto cian.
• text-light: Texto claro (blanco en fondos oscuros).
• text-dark: Texto oscuro (para fondos claros).
• text-white: Texto blanco.

Ejemplos:

<p class="text-primary">Texto azul principal</p>
<p class="text-success">Texto verde para éxito</p>
<p class="text-danger">Texto rojo para errores</p>

Ejemplo combinado:

<div class="bg-dark text-white p-3">
  <h1 class="text-warning">Título con texto amarillo</h1>
  <p class="text-info">Este es un párrafo con texto cian sobre fondo oscuro.</p>
</div>

• bg-dark: Fondo oscuro.
• text-white: Texto blanco.
• text-warning: Texto amarillo para el título.
• text-info: Texto cian para el párrafo.

Conclusión

Bootstrap simplifica la aplicación de colores a través de clases utilitarias claras y fáciles de recordar. Puedes usar las clases de background color y text color para mejorar la accesibilidad, legibilidad y estética de tus proyectos web rápidamente.