En el capítulo anterior, presentamos un ejemplo de cuadrícula con clases para dispositivos pequeños y medianos. Utilizamos dos divisiones (columnas) y les dimos una división del 25% / 75% en dispositivos pequeños, y una división del 50% / 50% en dispositivos medianos y una división del 33% / 66% en dispositivos grandes.
<div class="col-sm-3 col-md-6 col-lg-4">....</div>
<div class="col-sm-9 col-md-6 col-lg-8">....</div>
Pero en dispositivos xlarge, el diseño puede ser mejor como una división del 20% / 80%. Los dispositivos extra grandes se definen como que tienen un ancho de pantalla de 1200 píxeles o más. Para dispositivos xlarge usaremos las clases .col-xl- *.
<div class="col-sm-3 col-md-6 col-lg-4 col-xl-2">....</div>
<div class="col-sm-9 col-md-6 col-lg-8 col-xl-10">....</div>
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 una división del 20% / 80% en dispositivos xlarge. 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 col-lg-4 col-xl-2">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-9 col-md-6 col-lg-8 col-xl-10">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
Usando solo xlarge
En el siguiente ejemplo, solo especificamos la clase .col-xl-6 (sin .col-lg- *, .col-md- * y / o .col-sm- *). Esto significa que los dispositivos xlarge se dividirán 50% / 50%. Sin embargo, para dispositivos grandes, medianos, pequeños Y extra pequeños, se apilará verticalmente (100% de ancho).
Ejm
<div class="container-fluid">
<div class="row">
<div class="col-xl-6">
<p>Lorem ipsum...</p>
</div>
<div class="col-xl-6">
<p>Sed ut perspiciatis...</p>
</div>
</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-xl- * y solo usa la clase .col-xl 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 1200 px, las columnas se apilarán horizontalmente.
Ejm
<div class="row">
<div class="col-xl">1 of 2</div>
<div class="col-xl">2 of 2</div>
</div>
<div class="row">
<div class="col-xl">1 of 4</div>
<div class="col-xl">2 of 4</div>
<div class="col-xl">3 of 4</div>
<div class="col-xl">4 of 4</div>
</div>