Bootstrap - Grilla

¿Qué es?

Bootstrap incluye una rejilla o retícula fluida de 12 columnas pensada para móviles y que cumple con el diseño web responsive, ya que estas crecen en función del tamaño del dispositivo, determinado por CSS.

El diseño de páginas basado en rejilla se realiza mediante filas y columnas donde se colocan los contenidos.

El funcionamiento de estas columnas está desarrollado con flexbox.

Tipos de Contenedor

container

Esta clase establece un ancho fijo, dependiendo del ancho del dispositivo.

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

container-fluid

Esta clase establece un ancho al 100%.

<div class="container-fluid">
  ...
</div>

container-breakpoint

Dependiendo del valor del breakpoint el contenedor se va a mostrar con un ancho fijo o de 100% en diferentes resoluciones.

<div class="container-sm">...</div>
<div class="container-md">...</div>
<div class="container-lg">...</div>
<div class="container-xl">...</div>
<div class="container-xxl">...</div>

Breakpoints

Los breakpoints disponibles son:

.container-sm / .container-md / .container-lg / .container-xl / .container-xxl

Filas y Columnas

Estructura

Cada fila está compuesta por 12 columnas independientemente del tamaño del dispositivo.

Si se exceden las 12 columnas dentro de una misma fila, los elementos se colocan debajo de las primeras 12.

A cada columna se le deberá especificar cuántos “módulos” deberá ocupar en cada uno de los anchos predefinidos.

.row - Filas

Deben ir dentro de contenedores (.container / .container-fluid / .container-breakpoint). Deben tener por hijos columnas.

.col-* - Columnas

Deben ir dentro de filas (.row). Allí se debe declarar el contenido. Automáticamente tienen “separación” entre sí con padding predefinido (no margin).

Clases de columna: .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12

Con responsive: .col-sm-*, .col-md-*, .col-lg-*, .col-xl-*, .col-xxl-*

Estructura Básica

<section class="row">
  <article class="col-4">
    ....
  </article>
</section>

<section class="row">
  <article class="col-xxl-2 col-xl-2 col-lg-2 col-md-6 col-sm-6 col-12">
    ...
  </article>
</section>

Se deben definir filas, y dentro de ellas columnas. El contenido se coloca dentro de las columnas. Las filas sólo deben contener columnas.

Las columnas de la rejilla definen su anchura especificando cuántas de las 12 columnas de la fila ocupan.

Combinando las clases se puede controlar el comportamiento en los distintos dispositivos.

Nota: El prefijo xs es de Bootstrap 3. En Bootstrap 5 trabajamos sin prefijo para los dispositivos más pequeños.

Columnas de Diseño Automático

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

Agregue cualquier cantidad de clases sin unidades para cada punto de interrupción que necesite y cada columna tendrá el mismo ancho.

Configurando Ancho de Columna

<div class="container">
  <div class="row">
    <div class="col">
      1 de 3
    </div>
    <div class="col-6">
      2 de 3 (ancho)
    </div>
    <div class="col">
      3 de 3
    </div>
  </div>
</div>

Puede establecer el ancho de una columna y hacer que las columnas hermanas cambien su tamaño automáticamente.

Mezclar y Combinar

<div class="row">
  <div class="col-12 col-md-8">.col-12 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

Use una combinación de diferentes clases para cada nivel según sea necesario.

Alineación de Columnas

Con las clases .align-items-* y .justify-content-* se puede alinear verticalmente y horizontalmente las columnas.

Estas clases también admiten diferentes valores en cada breakpoint:

.align-items-sm-*
.align-items-md-*
.align-items-lg-*
.align-items-xl-*
.align-items-xxl-*

.justify-content-sm-*
.justify-content-md-*
.justify-content-lg-*
.justify-content-xl-*
.justify-content-xxl-*

Alineación Vertical

<div class="container">
  <div class="row align-items-start">
    <div class="col">1 de 3 columnas</div>
    <div class="col">1 de 3 columnas</div>
    <div class="col">1 de 3 columnas</div>
  </div>
  <div class="row align-items-center">
    <div class="col">1 de 3 columnas</div>
    <div class="col">1 de 3 columnas</div>
    <div class="col">1 de 3 columnas</div>
  </div>
  <div class="row align-items-end">
    <div class="col">1 de 3 columnas</div>
    <div class="col">1 de 3 columnas</div>
    <div class="col">1 de 3 columnas</div>
  </div>
</div>