<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Sistema de Rejilla 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">
    <h3 class="fw-bold text-dark mb-3">Rejilla de 12 Columnas en Kilopolis</h3>
    
    <!-- 1. Distribución 8 / 4 -->
    <div class="row g-3 mb-4">
      <div class="col-12 col-md-8">
        <div class="p-4 bg-primary text-white rounded-3 shadow-sm h-100">
          <h4 class="fw-bold">Contenido Principal (col-md-8)</h4>
          <p class="mb-0">Ocupa 8 de las 12 columnas en pantallas medianas y el 100% en pantallas móviles.</p>
        </div>
      </div>
      <div class="col-12 col-md-4">
        <div class="p-4 bg-dark text-white rounded-3 shadow-sm h-100">
          <h4 class="fw-bold">Barra Lateral (col-md-4)</h4>
          <p class="mb-0">Ocupa las 4 columnas restantes (8 + 4 = 12).</p>
        </div>
      </div>
    </div>

    <!-- 2. Rejilla de 3 Columnas Iguales (4 + 4 + 4 = 12) -->
    <div class="row g-3 text-center">
      <div class="col-12 col-sm-6 col-lg-4">
        <div class="p-3 bg-white border border-secondary-subtle rounded-3 shadow-sm">
          <span class="badge bg-info text-dark mb-2">Módulo 1</span>
          <h5 class="fw-bold mb-1">HTML5 Moderno</h5>
          <small class="text-muted">Estructura semántica</small>
        </div>
      </div>

      <div class="col-12 col-sm-6 col-lg-4">
        <div class="p-3 bg-white border border-secondary-subtle rounded-3 shadow-sm">
          <span class="badge bg-warning text-dark mb-2">Módulo 2</span>
          <h5 class="fw-bold mb-1">CSS3 & Flexbox</h5>
          <small class="text-muted">Diseño visual responsivo</small>
        </div>
      </div>

      <div class="col-12 col-sm-12 col-lg-4">
        <div class="p-3 bg-white border border-secondary-subtle rounded-3 shadow-sm">
          <span class="badge bg-success mb-2">Módulo 3</span>
          <h5 class="fw-bold mb-1">Bootstrap 5</h5>
          <small class="text-muted">Maquetación ágil</small>
        </div>
      </div>
    </div>
  </div>

</body>
</html>