Tabla de contenido

El sistema de Grid de Bootstrap es uno de los conceptos más importantes a dominar si quieres hacer diseño web responsivo de forma eficiente. Una vez que lo entiendes, puedes crear casi cualquier layout en minutos.

El concepto de las 12 columnas

Bootstrap divide el ancho disponible en 12 columnas iguales. Tú decides cuántas columnas ocupa cada elemento de tu página. Por ejemplo:

  • Un elemento de 12 columnas ocupa todo el ancho (100%)
  • Dos elementos de 6 columnas quedan lado a lado (50% cada uno)
  • Tres elementos de 4 columnas forman tres columnas iguales (33.3% c/u)
  • Un elemento de 8 y otro de 4 dan un layout de 2/3 y 1/3

La suma siempre debe ser 12 (o menos, si quieres dejar espacio en blanco).

Container, row y col

Toda grilla de Bootstrap necesita tres elementos anidados:

Container → define el ancho máximo del contenido y lo centra. Row → crea una fila horizontal. Col → define cada columna dentro de la fila.

<div class="container">
  <div class="row">
    <div class="col-4">Columna 1 (4/12 = 33%)</div>
    <div class="col-4">Columna 2 (4/12 = 33%)</div>
    <div class="col-4">Columna 3 (4/12 = 33%)</div>
  </div>
</div>

También existe container-fluid que ocupa el 100% del ancho sin máximo.

Si usas solo col sin número, Bootstrap distribuye las columnas de forma equitativa automáticamente:

<div class="row">
  <div class="col">Auto</div>  <!-- 50% -->
  <div class="col">Auto</div>  <!-- 50% -->
</div>

Breakpoints y diseño responsivo

El verdadero poder del grid está en los breakpoints: puedes especificar cuántas columnas ocupa un elemento dependiendo del tamaño de pantalla.

<div class="row">
  <div class="col-12 col-sm-6 col-md-4 col-lg-3">
    <!-- 
    Móvil (<576px): 12 columnas = ancho completo
    Móvil grande (≥576px): 6 columnas = 50%
    Tablet (≥768px): 4 columnas = 33%
    Escritorio (≥992px): 3 columnas = 25%
    -->
  </div>
</div>

Esto es lo que hace que Bootstrap sea “responsivo por defecto”: con clases CSS defines el comportamiento en cada tamaño sin media queries manuales.

Layouts comunes con ejemplos

Blog con sidebar (8 + 4):

<div class="container">
  <div class="row">
    <main class="col-12 col-md-8">
      <h1>Artículo principal</h1>
      <p>Contenido del artículo...</p>
    </main>
    <aside class="col-12 col-md-4">
      <h2>Sidebar</h2>
      <p>Artículos relacionados...</p>
    </aside>
  </div>
</div>

En móvil, ambas secciones se apilan verticalmente. En tablet y escritorio, el artículo ocupa 2/3 y el sidebar 1/3.

Grid de tarjetas (4 columnas en escritorio, 2 en tablet, 1 en móvil):

<div class="container">
  <div class="row g-3">  <!-- g-3 agrega gap entre columnas -->
    <div class="col-12 col-sm-6 col-lg-3">
      <div class="card">Tarjeta 1</div>
    </div>
    <div class="col-12 col-sm-6 col-lg-3">
      <div class="card">Tarjeta 2</div>
    </div>
    <div class="col-12 col-sm-6 col-lg-3">
      <div class="card">Tarjeta 3</div>
    </div>
    <div class="col-12 col-sm-6 col-lg-3">
      <div class="card">Tarjeta 4</div>
    </div>
  </div>
</div>

Header con logo y navegación:

<header class="container-fluid py-3 bg-dark">
  <div class="row align-items-center">
    <div class="col-auto">
      <img src="logo.webp" alt="Logo" height="40">
    </div>
    <div class="col text-end">
      <nav>
        <a href="#" class="text-white me-3">Inicio</a>
        <a href="#" class="text-white me-3">Blog</a>
        <a href="#" class="text-white">Contacto</a>
      </nav>
    </div>
  </div>
</header>

Offset y orden de columnas

Offset te permite empujar columnas hacia la derecha agregando columnas vacías:

<div class="row">
  <div class="col-4 offset-4">
    <!-- Centrado: 4 columnas vacías + 4 de contenido + 4 vacías -->
  </div>
</div>

Order permite cambiar el orden visual sin cambiar el HTML:

<div class="row">
  <div class="col order-2">Aparece segundo en escritorio</div>
  <div class="col order-1">Aparece primero en escritorio</div>
</div>

Esto es muy útil para SEO: puedes tener el contenido principal primero en el HTML (mejor para crawlers) pero mostrar el sidebar visualmente primero en pantalla.

Nesting: grids dentro de grids

Puedes anidar un row dentro de una col para crear grids más complejos:

<div class="container">
  <div class="row">
    <div class="col-8">
      <p>Columna principal</p>
      <!-- Grid anidado dentro de la columna principal -->
      <div class="row">
        <div class="col-6">Sub-columna 1</div>
        <div class="col-6">Sub-columna 2</div>
      </div>
    </div>
    <div class="col-4">Sidebar</div>
  </div>
</div>

El sistema de grid de Bootstrap es una de esas cosas que parece compleja al inicio pero que después de practicar un par de horas se vuelve completamente intuitiva. La clave es recordar los 12 columnas, los breakpoints y la estructura container → row → col.