Ejemplos de cuadrículo de Bootstrap

Diseños de cuadrícula básicos para que te familiarices con la construcción dentro del sistema de cuadrícula Bootstrap.

En estos ejemplos, la clase .themed-grid-col se agrega a las columnas para agregar un tema. Esta no es una clase que está disponible en Bootstrap por defecto.

Cinco niveles de cuadrícula

Hay cinco niveles en el sistema de cuadrícula de Bootstrap, uno para cada rango de dispositivos que admitimos. Cada nivel comienza con un tamaño mínimo de ventana gráfica y se aplica automáticamente a los dispositivos más grandes, a menos que se sobrescriba.

.col-4
.col-4
.col-4
.col-sm-4
.col-sm-4
.col-sm-4
.col-md-4
.col-md-4
.col-md-4
.col-lg-4
.col-lg-4
.col-lg-4
.col-xl-4
.col-xl-4
.col-xl-4
.col-xxl-4
.col-xxl-4
.col-xxl-4

Tres columnas iguales

Obtén tres columnas de igual ancho comenzando en escritorios y escalando a escritorios grandes. En dispositivos móviles, tabletas e inferiores, las columnas se apilarán automáticamente.

.col-md-4
.col-md-4
.col-md-4

Alternativa de tres columnas iguales

Al usar las clases .row-cols-*, puedes crear fácilmente una cuadrícula con columnas iguales.

.col child of .row-cols-md-3
.col child of .row-cols-md-3
.col child of .row-cols-md-3

Tres columnas desiguales

Obtén tres columnas comenzando en escritorios y escalando a escritorios grandes de varios anchos. Recuerda, las columnas de la cuadrícula deben sumar doce para un solo bloque horizontal. Más que eso, y las columnas comienzan a apilarse sin importar el viewport.

.col-md-3
.col-md-6
.col-md-3

Dos columnas

Obtén dos columnas comenzando en escritorios y escalando a escritorios grandes.

.col-md-8
.col-md-4

Ancho completo, columna única

No se necesitan clases de cuadrícula para elementos de ancho completo.

Dos columnas con dos columnas anidadas

Según la documentación, anidar es fácil: simplemente coloca una fila de columnas dentro de una columna existente. Esto te brinda dos columnas comenzando en escritorios y escalando a escritorios grandes, con otras dos (anchos iguales) dentro de la columna más grande.

En tamaños de dispositivos móviles, tabletas y menos, estas columnas y sus columnas anidadas se apilarán.

.col-md-8
.col-md-6
.col-md-6
.col-md-4

Mixto: móvil y escritorio

El sistema de cuadrícula Bootstrap v5 tiene seis niveles de clases: xs (extrapequeño, este infijo de clase no se usa), sm (pequeño), md (mediano), lg (grande), xl (extragrande) y xxl (xx-grande). Puedes usar casi cualquier combinación de estas clases para crear diseños más dinámicos y flexibles.

Cada nivel de clases se amplía, lo que significa que si planeas establecer los mismos anchos para md, lg, xl y xxl, solo necesitas especificar md.

.col-md-8
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6
.col-6

Mixto: móvil, tableta y escritorio

.col-sm-6 .col-lg-8
.col-6 .col-lg-4
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4

Gutters

Con las clases .gx-*, los gutters horizontales se pueden ajustar.

.col with .gx-4 gutters
.col with .gx-4 gutters
.col with .gx-4 gutters
.col with .gx-4 gutters
.col with .gx-4 gutters
.col with .gx-4 gutters

Usa las clases .gy-* para controlar los gutters verticales.

.col with .gy-4 gutters
.col with .gy-4 gutters
.col with .gy-4 gutters
.col with .gy-4 gutters
.col with .gy-4 gutters
.col with .gy-4 gutters

Con las clases .g-*, se pueden ajustar los gutters en ambas direcciones.

.col with .g-3 gutters
.col with .g-3 gutters
.col with .g-3 gutters
.col with .g-3 gutters
.col with .g-3 gutters
.col with .g-3 gutters

Contenedores

Las clases adicionales agregadas en Bootstrap v4.4 permiten contenedores que tienen un 100% de ancho hasta un breakpoint particular. v5 agrega un nuevo breakpoint xxl.

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