Crearemos un sistema de cuadrícula básico que comienza apilado en dispositivos extra pequeños, antes de volverse horizontal en dispositivos más grandes. El siguiente ejemplo muestra un diseño simple de dos columnas «apiladas a horizontales», lo que significa que dará como resultado una división del 50% / 50% en todas las pantallas, excepto en pantallas pequeñas adicionales, que se apilarán automáticamente (100%):
Ejm
<div class="container">
<div class="row">
<div class="col-sm-6 bg-success">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6 bg-warning">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
Consejo: Los números en las clases .col-sm- * indican cuántas columnas debe abarcar el div (de un total de 12). Entonces, .col-sm-1 abarca 1 columna, .col-sm-4 abarca 4 columnas, .col-sm-6 abarca 6 columnas, etc.
Nota: Asegúrate de que la suma sume 12 o menos (no es necesario que uses las 12 columnas disponibles).
Consejo: Puedes convertir cualquier diseño de ancho fijo en un diseño de ancho completo cambiando la clase .container a .container-fluid.
Ejm
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-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-size- * y solo usa la clase .col-size en un número específico de elementos col. Bootstrap reconocerá cuántas columnas hay, y cada columna tendrá el mismo ancho. Las clases de tamaño determinan cuándo las columnas deben responder.
Ejm
<div class="row">
<div class="col-sm">1 of 2</div>
<div class="col-sm">2 of 2</div>
</div>
<div class="row">
<div class="col-sm">1 of 4</div>
<div class="col-sm">2 of 4</div>
<div class="col-sm">3 of 4</div>
<div class="col-sm">4 of 4</div>
</div>