Utilizando las 12 columnas
En este ejemplo creamos tres columnas de igual ancho en todos los dispositivos. Esas columnas están centradas en la página con el .container principal.
Por ejemplo, aquí hay dos diseños de cuadrícula que se aplican a cada dispositivo, desde xs hasta xxl.
El auto-layout para las columnas de cuadrícula de flexbox también significa que puedes establecer el ancho de una columna y hacer que las columnas hermanas cambien de tamaño automáticamente a su alrededor.
Para cuadrículas que son iguales desde el dispositivo más pequeño hasta el más grande, usa las clases .col y .col-*. Especifica una clase numerada cuando necesites una columna de tamaño particular; de lo contrario, siéntate libre de apegarte a .col.
Usando un solo conjunto de clases .col-sm-*, puedes crear un sistema de cuadrícula básico que comienza apilado y se vuelve horizontal en el breakpoint pequeño (sm).
¿No quieres que tus columnas simplemente se apilen en algunos niveles de cuadrícula? Usa una combinación de diferentes clases para cada nivel según sea necesario. Mira el ejemplo a continuación para tener una mejor idea de cómo funciona todo.
Usa las clases responsive .row-cols-* para establecer rápidamente la cantidad de columnas que mejor representen tu contenido y diseño. Mientras que las clases .col-* normales se aplican a las columnas individuales (p. ej., .col-md-4), las clases de columnas de fila se establecen en el .row principal como acceso directo. Con .row-cols-auto puedes dar a las columnas su ancho natural.