Bootstrap 5: la rejilla

La rejilla (grid) es el corazón de Bootstrap. Permite colocar el contenido en columnas que se reorganizan solas según el tamaño de la pantalla: una al lado de otra en el ordenador, una debajo de otra en el móvil.

La idea: 12 partes por fila

Cada fila se divide en 12 partes iguales. Tú decides cuántas partes ocupa cada columna:

<div class="container">
  <div class="row">
    <div class="col-8">Contenido principal (8 de 12)</div>
    <div class="col-4">Barra lateral (4 de 12)</div>
  </div>
</div>

Algunas combinaciones habituales:

Columnas	Clases
2 iguales	col-6 + col-6
3 iguales	col-4 × 3
4 iguales	col-3 × 4
Principal + lateral	col-8 + col-4 o col-9 + col-3
Centrada con márgenes	col-2 + col-8 + col-2

No es obligatorio sumar 12. Si suman más, las que no caben bajan a la siguiente línea.

La estructura siempre es la misma: contenedor → fila → columnas → tu contenido. El contenido va dentro de las columnas, nunca directamente en la fila.

Columnas automáticas

Si no indicas número, las columnas se reparten el espacio a partes iguales:

<div class="row">
  <div class="col">1</div>
  <div class="col">2</div>
  <div class="col">3</div>   <!-- tres columnas iguales -->
</div>

Responsive: los puntos de corte

Aquí está la magia. Puedes decir a partir de qué tamaño de pantalla se ponen las columnas en fila:

Prefijo	A partir de	Dispositivo típico
(ninguno)	0px	Todos, también móviles
sm	576px	Móvil en horizontal
md	768px	Tablet
lg	992px	Portátil
xl	1200px	Escritorio
xxl	1400px	Pantalla grande

<div class="row">
  <div class="col-md-6">A</div>
  <div class="col-md-6">B</div>
</div>

col-md-6 significa: a partir de 768px, ocupo 6 de 12. Por debajo, ocupo todo el ancho. Resultado: en tablets y ordenadores, A y B van una al lado de otra; en el móvil, apiladas.

Cada clase se aplica desde su tamaño hacia arriba, hasta que otra clase mayor la sustituye. Por eso puedes combinarlas:

<div class="row">
  <div class="col-12 col-sm-6 col-lg-3">Producto</div>
  <!-- ... -->
</div>

• En el móvil: 1 producto por fila (12/12).
• Desde 576px: 2 por fila (6/12).
• Desde 992px: 4 por fila (3/12).

Esto es mobile first: primero piensas en la pantalla pequeña y vas añadiendo cambios para las grandes.

Pruébalo tú: abre esta página en el ordenador, pulsa F12, activa el modo dispositivo y ve cambiando el ancho. Verás cómo las columnas del ejemplo se apilan y se despliegan.

Espacio entre columnas: gutters

Las columnas tienen una separación entre ellas. Se controla con g-* en la fila (de g-0 a g-5), o solo horizontal (gx-*) o vertical (gy-*):

<div class="row g-4"> ... </div>

Alinear las columnas

Como la fila es un contenedor Flexbox, se alinea con clases que son traducción directa de las propiedades de Flexbox:

<!-- Horizontal -->
<div class="row justify-content-center"> ... </div>
<!-- start | center | end | between | around | evenly -->

<!-- Vertical -->
<div class="row align-items-center"> ... </div>
<!-- start | center | end -->

Por ejemplo, para centrar un formulario de 6 columnas en la página: <div class="row justify-content-center"><div class="col-md-6">...</div></div>.

Desplazar y reordenar

<div class="col-md-4 offset-md-4">Centrada, con 4 columnas vacías a su izquierda</div>
<div class="col-md-6 order-md-2">Aparezco segunda en pantallas medianas</div>

Rejillas anidadas

Dentro de una columna puedes crear una nueva fila, que a su vez se divide en 12:

<div class="row">
  <div class="col-md-8">
    <div class="row">
      <div class="col-6">Mitad de la columna de 8</div>
      <div class="col-6">La otra mitad</div>
    </div>
  </div>
  <div class="col-md-4">Lateral</div>
</div>

Errores típicos

• Poner las columnas fuera de una .row, o la .row fuera de un .container.
• Meter el contenido directamente en la .row en lugar de en una columna.
• Cerrar mal un <div>: la rejilla se descoloca de formas muy raras.
• Olvidar la etiqueta viewport: en el móvil nunca se apilará nada.