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-*:

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

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):

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

Ver: Código 235.html

 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):

<!-- 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>

Ver: 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:

<!-- 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>