Bootstrap 4 Grids (cuadrídula)

Bootstrap 4 sistema Grid

El sistema de cuadrícula de Bootstrap está construido con flexbox y permite hasta 12 columnas en la página.

Si no deseas utilizar las 12 columnas individualmente, puedes agrupar las columnas para crear columnas más anchas:

El sistema de cuadrículas es Responsive, y las columnas se reorganizarán de manera automática, dependiendo del tamaño de la pantalla. Asegúrate de que la suma sume 12 o menos (no es necesario que uses las 12 columnas disponibles).

Clases Grid

El sistema de cuadrículas nos provee 5 clases a utilizar:

  • .col-: dispositivos extra pequeños, muestra un ancho de menos de 576 px.
  • .col-sm-: dispositivos pequeños, muestra un ancho igual o mayor que 576 px.
  • .col.md-: dispositivos medianos, muestran un ancho igual o mayor que 768 px.
  • .col-lg-: dispositivos grandes, muestran un ancho igual o mayor que 992 px.
  • .col-xl-: dispositivos extragrandes, muestran un ancho de pantalla igual o mayor que 1200 px.

Las clases de arriba pueden ser combinadas para crear diseños más dinámicos y flexibles. Cada clase se escala, por lo que si desea establecer los mismos anchos para sm y md, solo necesita especificar sm.

Estructura básica de una cuadrícula Bootstrap 4

El siguiente ejm es una estructura básica de una cuadrícula Bootstrap 4.

<!-- Controla el ancho de la columna y como debe aparecer en diferentes dispositivos -->
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>

<!-- O permite a Bootstrap automáticamente encargarse del diseño -->
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>
  • Primer ejemplo: crear una fila (<div class = “row”>). Luego, agregas el número deseado de columnas (etiquetas con las clases .col – * – * apropiadas). La primera estrella (*) representa la capacidad de respuesta: sm, md, lg o xl, mientras que la segunda estrella representa un número, que debería sumar 12 para cada fila.
  • Segundo ejemplo: en lugar de agregar un número a cada columna, deja que bootstrap maneje el diseño, para crear columnas de igual ancho: dos elementos “col” = 50% de ancho para cada columna. tres cols = 33.33% de ancho a cada col. cuatro cols = 25% de ancho, etc. También puedes usar .col-sm | md | lg | xl para hacer que las columnas respondan.

Veamos unos cuantos ejms.

Ejm con 3 columnas iguales

La sintaxis sería la siguiente:

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

Ejm con columnas receptivas

La sintaxis sería la siguiente

<div class="row">
 <div class="col-sm-3">.col-sm-3</div>
 <div class="col-sm-3">.col-sm-3</div>
 <div class="col-sm-3">.col-sm-3</div>
 <div class="col-sm-3">.col-sm-3</div>
</div>

Ejm con dos columnas distintas

Su sintaxis sería la siguiente:

<div class="row">
 <div class="col-sm-4">.col-sm-4</div>
 <div class="col-sm-8">.col-sm-4</div>
</div>