Bootstrap Grid - Dispositivos medianos

Ejemplo de Bootstrap Grid: dispositivos medianos

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 %.

Sugerencia: los dispositivos medianos se definen como aquellos que tienen un ancho de pantalla de 992 píxeles a 1199 píxeles .

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

Ahora agregaremos los anchos de columna para dispositivos medianos:

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). 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 y grandes se dividirán en un 50 %/50 %, porque la clase aumenta. Sin embargo, para dispositivos pequeños, se apilará verticalmente (100 % de ancho):

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