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.

En estos ejemplos, la .themed-grid-colclase se agrega a las columnas para agregar algo de tematización. 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 ventana gráfica y se aplica automáticamente a los dispositivos más grandes, a menos que se anule.

.col-4

.col-sm-4

.col-md-4

.col-lg-4

.col-xl-4

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

Alternativa de tres columnas iguales

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

.colniño de .row-cols-md-3

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-4

Mixto: móvil y escritorio

El sistema de cuadrícula Bootstrap v5 tiene seis niveles de clases: xs (extra pequeño, este infijo de clase no se usa), sm (pequeño), md (mediano), lg (grande), xl (x-grande) y xxl (xx -largo). 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 md, lg, xl y xxl, solo necesita especificar md.

.col-md-8

.col-6 .col-md-4

.col-6

Mixto: móvil, tableta y escritorio

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

.col-6 .col-lg-4

.col-6 .col-sm-4

canalones

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

.colcon .gx-4canalones

Usa las .gy-*clases para controlar las canaletas verticales.

.colcon .gy-4canalones

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

.colcon .g-3canalones

Contenedores

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

.envase

.contenedor-sm

.contenedor-md

.contenedor-lg

.contenedor-xl

.contenedor-xxl

.contenedor-fluido