Editor

Texto alternativo

1️⃣ ¿Qué hace Bootstrap Grid?

Cada elemento HTML ocupa un espacio en la página (una caja). Bootstrap aprovecha esta idea y nos ayuda a acomodar esas cajas en filas y columnas.

container → row → col

Es decir:

<div class="container">
  <div class="row">
    <div class="col">
      Caja 1
    </div>

    <div class="col">
      Caja 2
    </div>
  </div>
</div>

La idea es simple:

  • container crea un área de trabajo centrada.
  • row crea una fila horizontal.
  • col crea columnas dentro de esa fila.

2️⃣ El container: la caja principal

El container es una caja grande que centra el contenido de la página.

<div class="container">
  Contenido de la página
</div>

Texto alternativo

  • ✖️ Sin container, el contenido puede quedar pegado a los bordes de la pantalla.
  • ✔️ Con container, Bootstrap deja márgenes laterales automáticos y limita el ancho del contenido.

3️⃣ El row: una fila

Dentro del container, usamos row para crear una fila.

<div class="container">
  <div class="row">
    ...
  </div>
</div>

La fila sirve para colocar columnas una al lado de otra.

4️⃣ El col: una columna

Dentro de una fila usamos columnas.

<div class="container">
  <div class="row">
    <div class="col">
      Columna 1
    </div>
    <div class="col">
      Columna 2
    </div>
  </div>
</div>

Cada columna también es una caja. Puede contener texto, imágenes, tarjetas, botones, formularios u otros elementos.

5️⃣ Bootstrap divide la fila en 12 partes

Bootstrap trabaja con un sistema de 12 columnas.

Texto alternativo

Eso significa que cada fila se puede dividir en partes que sumen 12.

Ejemplo con dos columnas:

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

Ejemplo con tres columnas:

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

Ejemplo con una columna más grande que otra:

<div class="row">
  <div class="col-8">Contenido principal</div>
  <div class="col-4">Barra lateral</div>
</div>