Vea cómo funcionan los aspectos del sistema de cuadrícula Bootstrap en múltiples dispositivos con una práctica tabla..

Por ejemplo, aquí hay dos diseños de cuadrícula que se aplican a cada dispositivo y ventana gráfica, desde xs a xl . Agregue cualquier cantidad de clases sin unidades para cada punto de interrupción que necesite y cada columna tendrá el mismo ancho.

El diseño automático de las columnas de la cuadrícula de Flexbox también significa que puede establecer el ancho de una columna y hacer que las columnas hermanas se redimensionen automáticamente a su alrededor. Puede usar clases de cuadrícula predefinidas (como se muestra a continuación), combinaciones de cuadrículas o anchos en línea. Tenga en cuenta que las otras columnas cambiarán de tamaño sin importar el ancho de la columna central.

Utilice las clases col- {breakpoint} -auto para cambiar el tamaño de las columnas según el ancho natural de su contenido.

Cree columnas de igual ancho que abarquen varias filas insertando un .w-100 donde desee que las columnas se dividan en una nueva línea. Haga que las pausas sean receptivas mezclando el .w-100 con algunas utilidades de pantalla receptiva .

La cuadrícula de Bootstrap incluye cinco niveles de clases predefinidas para crear diseños complejos de respuesta. Personalice el tamaño de sus columnas en dispositivos extra pequeños, pequeños, medianos, grandes o extragrandes como mejor le parezca.

Todos los puntos de interrupción

Para cuadrículas que son iguales desde el dispositivo más pequeño al más grande, use las clases .col y .col- * . Especifique una clase numerada cuando necesite una columna de tamaño especial; de lo contrario, no dude en ceñirse a .col .

Con un solo conjunto de clases .col-sm- * , puede crear un sistema de cuadrícula básico que comienza apilado y se vuelve horizontal en el pequeño punto de interrupción ( sm ).

¿No desea que sus columnas simplemente se apilen en algunos niveles de cuadrícula? Use una combinación de diferentes clases para cada nivel según sea necesario. Vea el ejemplo a continuación para tener una mejor idea de cómo funciona todo.

Los canalones se pueden ajustar de manera receptiva mediante clases de utilidad de margen negativo y relleno específico de punto de interrupción. Para cambiar los medianiles en una fila determinada, empareje una utilidad de margen negativo en .row y las utilidades de relleno coincidentes en .col s. Es posible que el padre .container o .container-fluid también deba ajustarse para evitar un desbordamiento no deseado, utilizando nuevamente la utilidad de relleno coincidente.

A continuación, se muestra un ejemplo de cómo personalizar la cuadrícula Bootstrap en el punto de interrupción grande ( lg ) y superior. Hemos aumentado el relleno .col con .px-lg-5 y lo hemos contrarrestado con .mx-lg-n5 en el padre < code> .row y luego ajustó el contenedor .container con .px-lg-5 .

Utilice las utilidades de alineación de flexbox para alinear columnas vertical y horizontalmente. Internet Explorer 10-11 no admite la alineación vertical de elementos flexibles cuando el contenedor flexible tiene una altura mínima como se muestra a continuación. Consulte Flexbugs # 3 para obtener más detalles.

Alineación vertical

Cree columnas de igual ancho que abarquen varias filas insertando un .w-100 donde desee que las columnas se dividan en una nueva línea. Haga que las pausas sean receptivas mezclando .w-100 con algunas utilidades de visualización receptivas .