Ejemplos de Bootstrap grid

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

En estos ejemplos, la clase .themed-grid-col se agrega a las columnas para agregar algo de temática. Esta no es una clase que esté disponible en Bootstrap de forma predeterminada.

Cinco niveles de cuadrícula

Hay cinco niveles en el sistema de cuadrícula Bootstrap, uno para cada rango de dispositivos que admitimos. Cada nivel comienza con un tamaño mínimo de viewport 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 los escritorios y escalando a escritorios grandes. En dispositivos móviles, tabletas y siguientes, las columnas se acumulará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 hijo de .row-cols-md-3
.col hijo de .row-cols-md-3
.col hijo de .row-cols-md-3

Tres columnas desiguales

Obtén tres columnas comenzando en los 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, las columnas comenzarán a acumularse sin importar el viewport.

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

Dos columnas

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

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

Ancho completo, una sola columna

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 le proporciona dos columnas comenzando en los escritorios y escalando a escritorios grandes, con otras dos (de igual ancho) dentro de la columna más grande.

En tamaños de dispositivos móviles, tabletas y inferiores, estas columnas y sus columnas anidadas se acumularán (stack).

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

Mixto: móvil y escritorio

El sistema grid Bootstrap v5 tiene seis niveles de clases: xs (extra pequeña, este infijo de clase no se usa), sm (pequeña), md (mediana), lg (grande), xl (x-grande) y xxl (xx-grande). Puedes utilizar casi cualquier combinación de estas clases para crear diseños más dinámicos y flexibles.

Cada nivel de clases aumenta, 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, tablet 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 gutteres horizontales se pueden ajustar.

.col con .gx-4 gutters
.col con .gx-4 gutters
.col con .gx-4 gutters
.col con .gx-4 gutters
.col con .gx-4 gutters
.col con .gx-4 gutters

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

.col con .gy-4 gutters
.col con .gy-4 gutters
.col con .gy-4 gutters
.col con .gy-4 gutters
.col con .gy-4 gutters
.col con .gy-4 gutters

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

.col con .g-3 gutters
.col con .g-3 gutters
.col con .g-3 gutters
.col con .g-3 gutters
.col con .g-3 gutters
.col con .g-3 gutters

Contenedores

Las clases adicionales agregadas en Bootstrap v4.4 permiten contenedores que son 100% anchos hasta un punto de interrupción particular. v5 agrega un nuevo punto de interrupción xxl.

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