Tema 6 · Colores y Fondos

Paleta Temática y Fondos de Bootstrap

Aprende los 8 colores semánticos de Bootstrap 5, clases de texto .text-*, fondos sólidos .bg-*, la moderna gama de fondos suaves .bg-*-subtle y gradientes integrados.

Tipografía, Encabezados Display y Párrafos Tablas Estilizadas y Responsivas

La Paleta Semántica de Bootstrap 5

Bootstrap organiza sus esquemas cromáticos a través de 8 nombres semánticos que comunican intenciones de diseño universales:

Nombre Semántico Tonalidad Representativa Significado y Uso
primary Azul (#0d6efd) Color principal de marca, acciones primarias y enlaces.
secondary Gris (#6c757d) Acciones secundarias, cancelaciones e información neutral.
success Verde (#198754) Éxito, operaciones completadas, aprobaciones y dinero.
danger Rojo (#dc3545) Peligro, eliminación destructiva, errores y alertas críticas.
warning Amarillo / Ámbar (#ffc107) Precaución, advertencias pendientes y notas importantes.
info Cian claro (#0dcaf0) Información contextual, consejos y sugerencias de ayuda.
dark Gris oscuro / Negro (#212529) Pies de página, contrastes fuertes y modo oscuro.
light Blanco grisáceo (#f8f9fa) Fondos de tarjetas, paneles y superficies claras.

La Innovación de Bootstrap 5.3: Fondos Suaves (.bg-*-subtle)

En lugar de usar fondos saturados y pesados que dificultan la lectura del texto negro, Bootstrap 5.3 introdujo la familia .bg-*-subtle (ej. .bg-primary-subtle con texto .text-primary): 

<!-- Caja moderna y suave con excelente contraste accesible -->
<div class="p-3 bg-success-subtle text-success-emphasis border border-success-subtle rounded-3">
  Operación completada con éxito.
</div>

⚡ Catálogo de Colores y Fondos Suaves en Bootstrap 5

Compara la paleta de colores semánticos sólidos frente a las nuevas variantes sutiles y elegantes (subtle) de Bootstrap 5.3:

index.html
Solo lectura 
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Colores y Fondos Bootstrap 5</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="bg-light p-4">

  <div class="container" style="max-width: 800px;">
    <h3 class="fw-bold mb-3">Paleta Semántica en Kilopolis</h3>

    <!-- 1. Fondos Sólidos Principales -->
    <h5 class="text-muted small fw-bold text-uppercase mb-2">Fondos Sólidos (.bg-*)</h5>
    <div class="row g-2 text-white text-center mb-4">
      <div class="col-6 col-md-3">
        <div class="p-3 bg-primary rounded-3 shadow-sm fw-bold">Primary</div>
      </div>
      <div class="col-6 col-md-3">
        <div class="p-3 bg-success rounded-3 shadow-sm fw-bold">Success</div>
      </div>
      <div class="col-6 col-md-3">
        <div class="p-3 bg-danger rounded-3 shadow-sm fw-bold">Danger</div>
      </div>
      <div class="col-6 col-md-3">
        <div class="p-3 bg-dark rounded-3 shadow-sm fw-bold">Dark</div>
      </div>
    </div>

    <!-- 2. Fondos Suaves Modernos (.bg-*-subtle) -->
    <h5 class="text-muted small fw-bold text-uppercase mb-2">Fondos Suaves Modernos (.bg-*-subtle)</h5>
    <div class="row g-3">
      <div class="col-md-6">
        <div class="p-3 bg-primary-subtle text-primary border border-primary-subtle rounded-3">
          <strong class="d-block mb-1">Información de Curso (Primary Subtle)</strong>
          <small>Fondo azul claro óptimo para tarjetas informativas sin cansar la vista.</small>
        </div>
      </div>

      <div class="col-md-6">
        <div class="p-3 bg-success-subtle text-success border border-success-subtle rounded-3">
          <strong class="d-block mb-1">Pago Aprobado (Success Subtle)</strong>
          <small>Notificación de estado completado con estética contemporánea.</small>
        </div>
      </div>

      <div class="col-md-6">
        <div class="p-3 bg-warning-subtle text-warning-emphasis border border-warning-subtle rounded-3">
          <strong class="d-block mb-1">Mantenimiento Próximo (Warning Subtle)</strong>
          <small>Aviso preventivo con excelente contraste de lectura.</small>
        </div>
      </div>

      <div class="col-md-6">
        <div class="p-3 bg-danger-subtle text-danger border border-danger-subtle rounded-3">
          <strong class="d-block mb-1">Acceso Expirado (Danger Subtle)</strong>
          <small>Alerta crítica sin fondos estridentes de baja accesibilidad.</small>
        </div>
      </div>
    </div>
  </div>

</body>
</html>
Pruébalo tú mismo » Se abre en una nueva pestaña con ejecución en vivo
🦉
¿Tienes dudas con este tema?
Sócrates AI puede darte analogías y explicarte este código paso a paso.

🚀 ¿Quieres dominar Manual Completo de Bootstrap 5.3 y crear proyectos reales?

Aprende arquitectura limpia, desarrollo web moderno, buenas prácticas y despliegue en producción con nuestro Bootcamp Fullstack Developer con mentorías en vivo.

📖 Cuaderno HTML/CSS/BS5 Conocer el Bootcamp

🏛️ Autoría y Propiedad Intelectual: Obra educativa original de David Amador para Kilopolis Academia (Solucionáticos), estructurada sobre las especificaciones y estándares abiertos del W3C, el estándar vivo de WHATWG y la documentación oficial de código abierto. © Todos los derechos reservados.