¿Cómo usar el sistema de grillas de Bootstrap para organizar tu página?

El sistema de grillas de Bootstrap te permite dividir cualquier página en columnas que se acomodan solas según el tamaño de pantalla.

¿Alguna vez entraste a una página desde tu celular y tuviste que hacer zoom para leer algo? Ese problema existe porque el diseño no era responsivo. Bootstrap resuelve eso con su sistema de grillas. Es la herramienta más poderosa que vas a aprender en este curso.

Cómo funciona la grilla de Bootstrap

Bootstrap divide cada fila en 12 columnas invisibles. Tú decides cuántas columnas ocupa cada elemento. Por ejemplo, si quieres dos secciones iguales, cada una ocupa 6 columnas. Si quieres tres secciones iguales, cada una ocupa 4 columnas.

Siempre se trabaja con tres clases principales:

• .container — envuelve todo el contenido y le da márgenes laterales.
• .row — crea una fila horizontal.
• .col — define cada columna dentro de esa fila.

Así se ve en código:

<div class="container">
  <div class="row">
    <div class="col-6">Columna izquierda</div>
    <div class="col-6">Columna derecha</div>
  </div>
</div>

Ese código crea dos columnas iguales. Sencillo, ¿verdad?

La historia de Rodrigo y su tienda en línea

Rodrigo tiene 26 años y vende accesorios para celular en Monterrey. Quería crear una página de inicio para su tienda, pero todo su contenido se apilaba en una sola columna. Se veía aburrido y poco profesional.

Un amigo le enseñó a usar la grilla de Bootstrap. Rodrigo dividió su página en tres secciones: productos destacados, promociones del mes y datos de contacto. Cada sección ocupó 4 columnas.

<div class="container">
  <div class="row">
    <div class="col-4">Productos destacados</div>
    <div class="col-4">Promociones del mes</div>
    <div class="col-4">Contacto</div>
  </div>
</div>

El resultado fue inmediato. Su página se veía limpia y organizada. Las visitas desde celular aumentaron porque el diseño se ajustaba solo. Rodrigo no tuvo que escribir ni una línea de CSS para eso.

Los puntos de quiebre: el secreto del diseño responsivo

Aquí viene la parte que cambia todo. Bootstrap no solo divide columnas. También te deja definir cuántas columnas ocupa un elemento según el tamaño del dispositivo.

Estos son los tamaños que Bootstrap reconoce:

Puedes combinar estas clases en un solo elemento. Por ejemplo:

<div class="col-12 col-md-6 col-lg-4">Producto</div>

Eso significa: en celular ocupa 12 columnas (ancho completo). En tablet ocupa 6 columnas (mitad). En laptop ocupa 4 columnas (un tercio).

¿Por qué importa esto? Porque tus usuarios en México navegan principalmente desde su celular. Según datos recientes, más del 70% del tráfico web en México viene de dispositivos móviles.

La historia de Valeria y el catálogo de Liverpool

Valeria trabaja como diseñadora freelance en Ciudad de México. Un cliente le pidió replicar la forma en que Liverpool muestra su catálogo de productos: muchas tarjetas en pantalla grande, pocas en celular.

Valeria usó los puntos de quiebre para lograrlo:

<div class="container">
  <div class="row">
    <div class="col-12 col-sm-6 col-lg-3">Producto 1</div>
    <div class="col-12 col-sm-6 col-lg-3">Producto 2</div>
    <div class="col-12 col-sm-6 col-lg-3">Producto 3</div>
    <div class="col-12 col-sm-6 col-lg-3">Producto 4</div>
  </div>
</div>

En celular, cada producto ocupa toda la fila. En tablet, dos productos por fila. En laptop, cuatro productos por fila. El cliente quedó feliz. Valeria cobró $4,500 por esa página. Todo gracias a unas cuantas clases de Bootstrap.

Espaciado entre columnas con gap y g-

Cuando pones columnas juntas, a veces se ven muy pegadas. Bootstrap tiene clases especiales para agregar espacio entre ellas. Se llaman gutters y se aplican en la fila con la clase g-.

<div class="row g-3">
  <div class="col-4">Elemento 1</div>
  <div class="col-4">Elemento 2</div>
  <div class="col-4">Elemento 3</div>
</div>

El número va de 0 a 5. Cero es sin espacio, cinco es el máximo. Puedes también usar gx- para espacio horizontal y gy- para espacio vertical.

Esto es útil cuando haces tarjetas de productos, como las que ves en Mercado Libre. Cada tarjeta necesita respirar un poco para que se vea profesional.

Columnas automáticas con .col

Si no quieres pensar en números, Bootstrap también tiene una opción automática. Usa solo .col sin número y Bootstrap divide el espacio disponible de forma igualada.

<div class="row">
  <div class="col">Sección A</div>
  <div class="col">Sección B</div>
  <div class="col">Sección C</div>
</div>

Bootstrap detecta cuántos .col hay y los divide igual. Si son tres, cada uno toma 4 columnas. Si son cuatro, cada uno toma 3 columnas. Muy práctico para menús o filas de íconos.

Errores comunes que debes evitar

Error 1: Olvidar el .row dentro del .container. Las columnas siempre deben estar dentro de una fila. Si pones .col directamente en .container, el diseño se rompe.

Error 2: Sumar más de 12 columnas en una fila. Si pones col-8 y col-6, suman 14. Bootstrap lo va a empujar a la siguiente línea de forma inesperada. Siempre verifica que tus columnas sumen 12 o menos.

Error 3: No probar en celular. Muchos diseñadores hacen todo en laptop y nunca abren el inspector del navegador para simular un celular. Usa las herramientas de desarrollo de Chrome (F12) y activa la vista móvil. Ahí ves exactamente cómo se ve en un iPhone o en un Android económico.

Error 4: Usar container y container-fluid sin saber la diferencia. container tiene un ancho máximo y márgenes laterales. container-fluid ocupa el 100% del ancho sin márgenes. Para páginas de negocios como FEMSA o Bimbo, container se ve más profesional. Para banners de pantalla completa, usa container-fluid.

La historia de don Aurelio y su restaurante en Puebla

Don Aurelio tiene un restaurante de comida típica en Puebla. Su hijo Óscar, de 19 años, quiso hacerle una página web. Óscar apenas estaba aprendiendo Bootstrap.

Oscar cometió el error de no usar .row. Puso tres .col-4 directo dentro del .container. Todo se amontonó en una columna. Estuvo dos horas buscando el error.

Cuando agregó el .row faltante, el problema desapareció en segundos. Óscar aprendió la lección: la estructura siempre es container > row > col. Sin excepción.

La página del restaurante quedó con tres columnas: el menú, las fotos y la dirección. Don Aurelio la presumía con todos sus clientes.

Lo que ya puedes hacer

Ya conoces el núcleo de Bootstrap. Con el sistema de grillas puedes organizar cualquier página de forma profesional. No necesitas saber CSS avanzado. Solo necesitas entender las 12 columnas y los puntos de quiebre.

Practica creando una fila con tres tarjetas de productos. Luego agrega puntos de quiebre para que en celular se vean una por una. Ese ejercicio te va a enseñar más que cualquier teoría.