Este documento explica cómo usar la metodología de diseño de cuadrícula Bootstrap para crear diseños de múltiples columnas que se adapten a diferentes tamaños de pantalla. Describe cómo usar clases como .col-sm-3 y .col-sm-9 para crear diseños de dos columnas con proporciones 25%/75% y 33.3%/66.6% para dispositivos pequeños y superiores. También explica cómo usar solo la clase .col-sm para crear columnas de igual ancho automáticamente en todos los dispositivos excepto los más

1. GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”
Grids Pequeños en BOOTSTRAP
Muy pequeña Pequeño Mediana Grande Muy grande
Prefijo Clase .col- .col-sm- .col-md- .col-lg- .col-xl-
Ancho pantalla <576px >=576px >=768px >=992px >=1200px
Supongamos que tenemos un diseño simple con dos columnas. Queremos que las columnas se
distribuyan 25% / 75% para los dispositivos pequeños.
Para dispositivos pequeños usaremos las clases .col-sm-*:
Para un diseño 25% / 75% en dispositivos pequeños, medianos, grandes y muy grandes se
utilizará .col-sm-3 y .col-sm-9 en (y para dispositivos muy pequeños se apilarán):
Código 235.html
<div class="col-sm-3">....</div>
<div class="col-sm-9">....</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 bg-success">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-9 bg-warning">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>

2. GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”
Para una disposición de 33,3% / 66,6%, se utilizaría .col-sm-4 y .col-sm-8 (y por un / 50% de
fracción de 50%, se utilizaría .col-sm-6 y .col-sm-6):
Código 236.html
Columnas de Diseño Automático
En Bootstrap 4, hay una manera fácil de crear columnas iguales de anchura para todos los
dispositivos: simplemente retire el número de .col-sm-* y sólo utilice la clase .col-sm en un
número específico de elementos col . Bootstrap reconocerá el número de columnas que hay, y
cada columna tendrá el mismo ancho.
Si el tamaño de la pantalla es de menos de 576px , las columnas se apilan horizontalmente:
<!-- 33.3/66.6% -->
<div class="container-fluid">
<div class="row">
<div class="col-sm-4 bg-success">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-8 bg-warning">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
<!-- 2 columns: 50% de ancho en todos los dispositivo, menos en muy pequeños
(100% ancho) -->
<div class="row">
<div class="col-sm">1 de 2</div>
<div class="col-sm">2 de 2</div>
</div>
<!-- 4 columns: 25% de ancho en todos los dispositivo, menos en muy pequeños
(100% ancho) -->
<div class="row">
<div class="col-sm">1 de 4</div>
<div class="col-sm">2 de 4</div>
<div class="col-sm">3 de 4</div>
<div class="col-sm">4 de 4</div>
</div>