Sistema de cuadrícula de Bootstrap 5

Sistema de cuadrícula

El sistema de cuadrícula de Bootstrap se construye con flexbox, permitiendo hasta 12 columnas en la página.

Si no desea usar todas las 12 columnas por separado, puede combinar estas columnas para crear columnas más anchas:

El sistema de cuadrícula es rápido en respuesta, y las columnas se reordenan automáticamente según el tamaño de la pantalla.

Asegúrese de que la suma sea igual o menor a 12 (no es necesario usar todas las 12 columnas disponibles).

Clases de cuadrícula

El sistema de cuadrícula de Bootstrap 5 ofrece seis clases:

  • .col- (Dispositivos ultra pequeños - anchura de pantalla menor a 576px)
  • .col-sm- (Dispositivos pequeños - anchura de pantalla igual o mayor a 576px)
  • .col-md- (Dispositivos medianos - anchura de pantalla igual o mayor a 768px)
  • .col-lg- (Dispositivos grandes - anchura de pantalla igual o mayor a 992px)
  • .col-xl- (Dispositivos ultra grandes - anchura de pantalla igual o mayor a 1200px)
  • .col-xxl- (Dispositivos extra grandes - anchura de pantalla igual o mayor a 1400px)

Combinando las clases anteriores, se puede crear un diseño más dinámico y flexible.

Consejo:Cada clase se amplía en proporción, por lo que si desea establecer el mismo ancho para sm y md, simplemente especifique sm.

Estructura básica de la cuadrícula de Bootstrap 5

A continuación se muestra la estructura básica de la cuadrícula de Bootstrap 5:

<!-- Controla el ancho de las columnas, así como su visualización 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 deja que Bootstrap maneje automáticamente el diseño -->
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

Pruebe usted mismo

El primer ejemplo: crear una fila (<div class = "row">). Luego, agregue el número necesario de columnas (con .col-*-* etiqueta de clase). El primer asterisco (*) representa la respuesta: sm, md, lg, xl o xxl, mientras que el segundo asterisco representa un número, que debe sumar 12 en cada fila.

El segundo ejemplo: no se le da a cada col Agregar un número, en lugar de dejar que bootstrap maneje el diseño, para crear columnas iguales: dos "col" Elemento = 50% de ancho de cada columna, mientras que tres columnas = 33.33% de ancho de cada columna. Cuatro columnas = 25% de ancho, etc. También se puede usar .col-sm|md|lg|xl|xxl Hacer que las columnas sean responsivas.

Opciones de rejilla

La siguiente tabla resume cómo funciona el sistema de rejilla de Bootstrap 5 en diferentes tamaños de pantalla:

Super pequeño (<576px) Pequeño (>=576px) Mediano (>=768px) Grande (>=992px) Super grande (>=1200px) Extra grande (>=1400px)
Prefijo de clase .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
Comportamiento de la rejilla Siempre horizontal Plegable, horizontal por encima del punto de ruptura Plegable, horizontal por encima del punto de ruptura Plegable, horizontal por encima del punto de ruptura Plegable, horizontal por encima del punto de ruptura Plegable, horizontal por encima del punto de ruptura
Ancho del contenedor Ninguno (auto) 540px 720px 960px 1140px 1320px
Adecuado para Pantalla vertical del teléfono Pantalla horizontal del teléfono Tabletas Portátiles Portátiles y computadoras de escritorio Portátiles y computadoras de escritorio
Número de columnas 12 12 12 12 12 12
Ancho del muescas 1.5rem (en cada lado de la columna .75rem ) 1.5rem (en cada lado de la columna .75rem ) 1.5rem (en cada lado de la columna .75rem ) 1.5rem (en cada lado de la columna .75rem ) 1.5rem (en cada lado de la columna .75rem ) 1.5rem (en cada lado de la columna .75rem )
Anidado Sí Sí Sí Sí Sí Sí
Desplazamiento Sí Sí Sí Sí Sí Sí
Ordenación de columnas Sí Sí Sí Sí Sí Sí