Cuadrícula Bootstrap 4 - Grande

Ejemplo de cuadrícula grande

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

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

Para dispositivos grandes usaremos las .col-lg-*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. En el tamaño grande, mira clases con la palabra -lg- en ellas y usarlas".

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

Usando solo grandes

En el siguiente ejemplo, solo especificamos la .col-lg-6clase (sin .col-md-*y/o .col-sm-*). Esto significa que los dispositivos grandes y extragrandes se dividirán 50%/50%. Sin embargo, para dispositivos medianos, pequeños Y extrapequeñ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-lg-*y solo use la .col-lgclase 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 992 px , las columnas se apilarán horizontalmente: