La Grid de Bootstrap

El sistema de grid de Bootstrap es una de sus características más potentes. Te permite estructurar contenido de manera flexible y responsiva usando contenedores, filas, columnas y algunas opciones adicionales como offset. Aquí te explico cada componente con ejemplos:

1. Contenedor (container)

El contenedor es el elemento principal que encapsula el contenido de tu grid. Bootstrap ofrece tres tipos:

• .container: Tiene un ancho fijo y se adapta en función del tamaño de la pantalla.
• .container-fluid: Ocupa el 100% del ancho de la pantalla.
• .container-{breakpoint}: Cambia de ancho fijo a fluido dependiendo del punto de quiebre (breakpoint).

Ejemplo:

html

<div class="container">
  Contenido aquí dentro
</div>
<div class="container-fluid">
  Contenido fluido
</div>

2. Filas (row)

Las filas dividen tu diseño horizontalmente y son necesarias para contener las columnas.

Ejemplo:

html

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

3. Columnas (col)

Las columnas dentro de una fila usan un sistema de 12 columnas. Puedes especificar cuántas ocupará cada una con clases como .col-4 o .col-6.

Ejemplo:

html

<div class="container">
  <div class="row">
    <div class="col-6">Columna 1 (6 columnas)</div>
    <div class="col-6">Columna 2 (6 columnas)</div>
  </div>
</div>

4. Columnas dentro de columnas

Puedes anidar columnas colocando filas dentro de columnas.

Ejemplo:

html

<div class="container">
  <div class="row">
    <div class="col">
      <div class="row">
        <div class="col-6">Anidado 1</div>
        <div class="col-6">Anidado 2</div>
      </div>
    </div>
    <div class="col">Columna separada</div>
  </div>
</div>

5. Offset

El offset agrega espacio en blanco a la izquierda de una columna para centrar o alinear el contenido.

Ejemplo:

html

<div class="container">
  <div class="row">
    <div class="col-4 offset-4">Columna centrada</div>
  </div>
</div>

6. Responsividad

Puedes usar los puntos de quiebre para controlar el diseño en diferentes tamaños de pantalla:

• Extra pequeño (por defecto): <576px
• Pequeño (sm): >=576px
• Mediano (md): >=768px
• Grande (lg): >=992px
• Extra grande (xl): >=1200px
• Extra extra grande (xxl): >=1400px

Ejemplo:

html

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

7. Gap (espaciado entre filas y columnas)

A partir de Bootstrap 5, puedes usar clases como g-2 para controlar el espacio entre filas y columnas.

Ejemplo:

html

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

Con esto tienes una visión completa de cómo usar el sistema de grid en Bootstrap. ¡Adelante, prueba y crea diseños fantásticos!