Ejemplos de cuadrícula Bootstrap

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

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 ventana gráfica y se aplica automáticamente a los dispositivos más grandes, a menos que se anule.

.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

Tres columnas iguales

Obtenga tres columnas de igual ancho comenzando en los 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

Tres columnas desiguales

Obtenga tres columnas comenzando en los escritorios y escalando a escritorios grandes de varios anchos. Recuerde, 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 la ventana gráfica.

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

Dos columnas

Obtenga dos columnas comenzando en los 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 coloque una fila de columnas dentro de una columna existente. Esto le brinda dos columnas que comienzan en los escritorios y se escalan 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 v4 tiene cinco niveles de clases: xs (extra pequeño), sm (pequeño), md (mediano), lg (grande) y xl (extra grande). Puede 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 planea establecer los mismos anchos para xs y sm, solo necesita especificar xs.

.col-12 .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-12 .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