Bootstrap Grid - Dispositivos pequeños
Ejemplo de Bootstrap Grid: dispositivos pequeños
| Extra small | Small | Medium | Large | |
|---|---|---|---|---|
| Class prefix | .col-xs |
.col-sm |
.col-md |
.col-lg |
| Screen width | <768px | >=768px | >=992px | >=1200px |
Supongamos que tenemos un diseño simple con dos columnas. Queremos que las columnas se dividan en un 25 %/75 % para dispositivos pequeños.
Sugerencia: los dispositivos pequeños se definen como aquellos que tienen un ancho de pantalla de 768 píxeles a 991 píxeles .
Para dispositivos pequeños usaremos las .col-sm-*clases.
Agregaremos las siguientes clases a nuestras dos columnas:
<div class="col-sm-3">....</div>
<div class="col-sm-9">....</div>
Ahora Bootstrap va a decir "en el tamaño pequeño, busque clases con -sm- en ellas y utilícelas".
El siguiente ejemplo dará como resultado una división del 25 %/75 % en dispositivos pequeños (y medianos y grandes). En dispositivos extrapequeños, se acumulará automáticamente (100%):
Ejemplo
<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row">
<div class="col-sm-3" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-9" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
Nota: asegúrese de que la suma siempre sume 12.
Para una división del 33,3 %/66,6 %, usaría .col-sm-4y .col-sm-8:
Ejemplo
<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row">
<div class="col-sm-4" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-8" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
El siguiente capítulo muestra cómo agregar un porcentaje de división diferente para dispositivos medianos.