Bootstrap 4 cuadrícula mediana

Ejemplo de cuadrícula mediana

En el capítulo anterior, presentamos un ejemplo de cuadrícula con clases para dispositivos pequeños. Usamos dos divs (columnas) y les dimos una división de 25%/75%:

Pero en dispositivos medianos, el diseño puede ser mejor como una división del 50 %/50 %.

Para dispositivos medianos usaremos las .col-md-*clases:

Ahora Bootstrap va a decir "en el tamaño pequeño, mira las clases con -sm- en ellas y úsalas. En el tamaño mediano, mira las clases con -md- en ellas y úsalas".

El siguiente ejemplo dará como resultado una división del 25 %/75 % en dispositivos pequeños y una división del 50 %/50 % en dispositivos medianos (y grandes y extragrandes). En dispositivos extrapequeños, se acumulará automáticamente (100%):

Usando solo medio

En el siguiente ejemplo, solo especificamos la .col-md-6clase (sin .col-sm-*). Esto significa que los dispositivos medianos, grandes y extragrandes se dividirán en un 50 %/50 %, porque la clase aumenta. Sin embargo, para dispositivos pequeños y extra pequeños, se apilará verticalmente (100 % de ancho):

Columnas de diseño automático

En Bootstrap 4, hay una manera fácil de crear columnas de igual ancho para todos los dispositivos: simplemente elimine el número .col-md-*y solo use la .col-mdclase en un número específico de elementos col . Bootstrap reconocerá cuántas columnas hay y cada columna tendrá el mismo ancho.

Si el tamaño de la pantalla es inferior a 768 px , las columnas se apilarán horizontalmente:

El siguiente capítulo muestra cómo agregar un porcentaje de división diferente para dispositivos grandes.