Bootstrap 4 Grid Medium

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 del 25% / 75%.

<div class="col-sm-3">....</div>
<div class="col-sm-9">....</div>

Pero en dispositivos medianos, el diseño puede ser mejor como una división del 50% / 50%. Los dispositivos medianos se definen como que tienen un ancho de pantalla de 768 píxeles a 991 píxeles. Para dispositivos medianos usaremos las clases .col-md- *.

<div class="col-sm-3 col-md-6">....</div>
<div class="col-sm-9 col-md-6">....</div>

Ahora Bootstrap va a decir «en el tamaño pequeño, mira las clases con -sm- 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 grandes). En dispositivos extra pequeños, se apilará automáticamente (100%).

Ejm

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 col-md-6">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-sm-9 col-md-6">
      <p>Sed ut perspiciatis...</p>
    </div>
  </div>
</div>

Nota: Asegúrate de que la suma sume 12 o menos (no es necesario que uses las 12 columnas disponibles).

Usando solo medio

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

Ejm

<div class="row">
  <div class="col-md-6">
    <p>Lorem ipsum...</p>
  </div>
  <div class="col-md-6">
    <p>Sed ut perspiciatis...</p>
  </div>
</div>

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 elimina el número de .col-md- * y solo usa la clase .col-md 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.

Ejm

<!-- Two columns: 50% width on medium and up-->
<div class="row">
  <div class="col-md">1 of 2</div>
  <div class="col-md">2 of 2</div>
</div>

<!-- Four columns: 25% width on medium and up -->
<div class="row">
  <div class="col-md">1 of 4</div>
  <div class="col-md">2 of 4</div>
  <div class="col-md">3 of 4</div>
  <div class="col-md">4 of 4</div>
</div>