Ejemplos de cuadrícula Bootstrap
Diseños básicos de cuadrícula para que te familiarices con la construcción dentro del sistema de cuadrícula de Bootstrap.
En estos ejemplos se añade la clase .themed-grid-col a las columnas para añadir
algo de estilización. Esta no es una clase 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 soportamos. Cada nivel comienza en un tamaño mínimo de viewport y se aplica automáticamente a los dispositivos más grandes a menos que se sobrescriba.
Tres columnas iguales
Obtén tres columnas de igual ancho que comienzan en escritorios y escalan a escritorios grandes. En dispositivos móviles, tablets y menores, las columnas se apilarán automáticamente.
Alternativa de tres columnas iguales
Usando 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-3Tres columnas desiguales
Obtén tres columnas que comienzan en escritorios y escalan 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 empezarán a apilarse sin importar el viewport.
Dos columnas
Obtén dos columnas que comienzan en escritorios y escalan a escritorios grandes.
Ancho completo, columna única
No son necesarias clases de cuadrícula para elementos de ancho completo.
Dos columnas con dos columnas anidadas
Según la documentación, el anidamiento es fácil—solo pon una fila de columnas dentro de una columna existente. Esto te da dos columnas que comienzan en escritorios y escalan a escritorios grandes, con otras dos (anchos iguales) dentro de la columna más grande.
En tamaños de dispositivos móviles, tablets y menores, estas columnas y sus columnas anidadas se apilarán.
Mixto: móvil y escritorio
El sistema de cuadrícula de Bootstrap v4 tiene cinco niveles de clases: xs (extra small, este infijo de clase no se usa), sm (small), md (medium), lg (large) y xl (extra large). Puedes usar casi cualquier combinación de estas clases para crear diseños más dinámicos y flexibles.
Cada nivel de clases escala hacia arriba, lo que significa que si planeas establecer los mismos anchos para md, lg y xl, solo necesitas especificar md.
Mixto: móvil, tablet y escritorio
Gutters
Con las clases .gx-*, los canales horizontales se pueden ajustar.
.col con canales .gx-4.col con canales .gx-4.col con canales .gx-4.col con canales .gx-4.col con canales .gx-4.col con canales .gx-4Usa las clases .gy-* para controlar los canales verticales.
.col con canales .gy-4.col con canales .gy-4.col con canales .gy-4.col con canales .gy-4.col con canales .gy-4.col con canales .gy-4Con las clases .g-*, se pueden ajustar los canales en ambas
direcciones.
.col con canales .g-3.col con canales .g-3.col con canales .g-3.col con canales .g-3.col con canales .g-3.col con canales .g-3Containers
Las clases adicionales añadidas en Bootstrap v4.4 permiten contenedores que son 100% anchos
hasta un breakpoint particular. v5 añade un nuevo breakpoint xxl.