GERENCIA VIRTUAL

“Capacitación y asesoría a solo un click”

Grids muy 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 TODOS los dispositivos.
Vamos a añadir las siguientes clases para nuestras dos columnas:

Nota: Asegúrese de que la suma ascienda a 12 o menos (no es necesario que utilice todas las 12
columnas disponibles):

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

Ver: Código 233.html

Para un diseño 33,3% / 66,6% se utilizaría .col-4y .col-8 (y para un 50% / 50%, se utilizaría .col-6
y .col-6):

<!-- 33.3%/66.6% -->

<div class="container-fluid">
<div class="row">
<div class="col-4 bg-success">
<p>Lorem ipsum...</p>
</div>
<div class="col-8 bg-warning">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>

Ver: Código 234.html

 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

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 retire el número de .col-* y sólo utilice la clase .col en un número especificado
de elementos col . Bootstrap reconocerá el número de columnas que hay, y cada columna tendrá
el mismo ancho

<!-- 2 columnas: 50% ancho-->

<div class="row">
<div class="col">1 of 2</div>
<div class="col">2 of 2</div>
</div>

<!-- 4 columnas: 25% ancho-->

<div class="row">
<div class="col">1 of 4</div>
<div class="col">2 of 4</div>
<div class="col">3 of 4</div>
<div class="col">4 of 4</div>
</div>