Tema 24 · Utilidades y Modo Oscuro

Utilidades Espaciales, Sombras y Flexbox

Domina las utilidades esenciales de Bootstrap 5: espaciados m-*/p-*, sombras realistas shadow-*, bordes rounded-*, alineación rápida con d-flex y cambio de tema oscuro con data-bs-theme="dark".

Carrusel de Imágenes y Menús Deslizantes (Offcanvas)

La Escala Espacial: Márgenes y Rellenos (m-* / p-*)

Bootstrap 5 permite ajustar el espaciado entre elementos de forma ultrarrápida sin escribir hojas de estilo manuales, utilizando una escala de 0 a 5:

Propiedad Lados Escala de Tamaño Ejemplo Práctico
m (margin)
p (padding)		 t (top), b (bottom), s (start/izq), e (end/der), x (horizontal), y (vertical) 0 (0rem)
1 (0.25rem)
2 (0.5rem)
3 (1rem)
4 (1.5rem)
5 (3rem)
auto		 .mb-3 (margen inferior de 1rem)
.p-4 (padding de 1.5rem en los 4 lados)
.mx-auto (centrado horizontal)

Sombras y Redondeo de Esquinas

  • Sombras: .shadow-none, .shadow-sm, .shadow, .shadow-lg.
  • Esquinas Redondeadas: .rounded, .rounded-1 a .rounded-5, .rounded-circle, .rounded-pill.

Modo Oscuro Integrado en Bootstrap 5.3

En Bootstrap 5.3, activar el modo oscuro nativo en cualquier contenedor o en la página completa solo requiere asignar el atributo de datos: 

<!-- Activa el modo oscuro en este contenedor y en todos sus componentes internos -->
<div class="card p-4" data-bs-theme="dark">
  <h4>Tarjeta en Modo Oscuro Automático</h4>
  <p>Todos los colores de fondo, bordes y tipografías se adaptan por variables CSS.</p>
</div>

⚡ Laboratorio de Utilidades y Conmutador de Modo Oscuro

Haz clic en el botón para alternar el atributo data-bs-theme="dark" y observa la transformación instantánea de colores y sombras en 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>Utilidades y Modo Oscuro 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: 650px;">
    <!-- Tarjeta adaptable con data-bs-theme -->
    <div id="cajaTema" class="card shadow-lg border-0 rounded-4 p-4 bg-white mb-4 transition">
      <div class="d-flex justify-content-between align-items-center mb-3">
        <span class="badge bg-primary px-3 py-2 rounded-pill fw-bold">
          Bootstrap 5.3 Moderno
        </span>
        <button class="btn btn-outline-secondary btn-sm rounded-pill px-3" onclick="alternarTema()">
          🌓 Alternar Tema
        </button>
      </div>

      <h3 class="fw-bold mb-2">Utilidades y Custom Properties</h3>
      <p class="text-secondary mb-4">
        Esta tarjeta combina sombras suaves (<code>shadow-lg</code>), esquinas redondeadas (<code>rounded-4</code>), márgenes calculados (<code>mb-4</code>) y Flexbox nativo (<code>d-flex</code>).
      </p>

      <!-- Mini componentes de demostración -->
      <div class="d-flex gap-2 mb-4">
        <div class="p-3 bg-primary-subtle text-primary rounded-3 flex-fill text-center fw-bold">
          flex-fill 1
        </div>
        <div class="p-3 bg-success-subtle text-success rounded-3 flex-fill text-center fw-bold">
          flex-fill 2
        </div>
      </div>

      <button class="btn btn-primary py-2 rounded-pill fw-semibold shadow-sm" onclick="alert('¡Has completado el manual de Bootstrap 5!')">
        ¡Finalizar Manual de Bootstrap 5! &raquo;
      </button>
    </div>
  </div>

  <script>
    function alternarTema() {
      const caja = document.getElementById('cajaTema');
      const actual = caja.getAttribute('data-bs-theme');
      if (actual === 'dark') {
        caja.removeAttribute('data-bs-theme');
      } else {
        caja.setAttribute('data-bs-theme', 'dark');
      }
    }
  </script>

</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.