Tema 3 · Grid de 12 Columnas

El Sistema de Rejilla de 12 Columnas

Domina el diseño responsivo con la cuadrícula de 12 columnas de Bootstrap 5: jerarquía container-row-col, anchos proporcionales, combinación responsiva y canaletas de separación (gutters).

Contenedores y Puntos de Ruptura (Breakpoints) Alineación, Desplazamiento y Orden en Grid

La Regla Sagrada: Container → Row → Col

El sistema de rejilla de Bootstrap 5 utiliza Flexbox internamente para distribuir el contenido en hasta 12 columnas imaginarias por fila. Para que los cálculos espaciales y márgenes negativos funcionen correctamente, debes respetar siempre esta jerarquía de 3 niveles: 

<div class="container">   <!-- 1. Nivel exterior: Contenedor -->
  <div class="row">        <!-- 2. Nivel medio: Fila (flex container) -->
    <div class="col-8">    <!-- 3. Nivel interno: Columnas (la suma debe ser 12) -->
      Columna principal (8 de 12)
    </div>
    <div class="col-4">
      Barra lateral (4 de 12)
    </div>
  </div>
</div>

Columnas Automáticas y Proporcionales

  • Distribución Igualitaria (.col): Si colocas tres elementos con clase .col dentro de una .row, Bootstrap asignará automáticamente el 33.33% de ancho a cada una.
  • Ancho Definido (.col-6): Ocupa exactamente la mitad de la fila (6 de 12 columnas).
  • Columnas Mixtas Responsivas (.col-12 .col-md-6 .col-lg-4): En teléfonos móviles ocupará el 100% (12 columnas), en tablets el 50% (6 columnas) y en monitores el 33.33% (4 columnas).

Espaciado entre Columnas: Canaletas (Gutters)

En Bootstrap 5, el espacio entre columnas se controla directamente en la fila con la familia de clases g-* (escala de 0 a 5):

  • g-3 / g-4: Espaciado uniforme horizontal y vertical entre celdas.
  • gx-4: Controla únicamente la canaleta horizontal.
  • gy-2: Controla únicamente la separación vertical al quebrar en varias líneas.
  • g-0: Elimina completamente las canaletas para rejillas continuas sin fisuras.

⚡ Cuadrícula Responsiva de 12 Columnas en Acción

Redimensiona la ventana o el panel de pruebas: las columnas pasan de estar apiladas verticalmente en móvil a mostrarse en 3 columnas elegantes en pantallas medianas:

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