Bootstrap Grid - Apilado a horizontal
Ejemplo de cuadrícula Bootstrap: apilado en horizontal
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 "apilado a horizontal", lo que significa que dará como resultado una división del 50 %/50 % en todas las pantallas, excepto en las pantallas extra pequeñas, que se apilarán automáticamente (100 %):
Ejemplo: apilado en horizontal
<div class="container">
<h1>Hello World!</h1>
<div class="row">
<div class="col-sm-6" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
Sugerencia: los números en las .col-sm-*clases indican cuántas columnas debe abarcar el div (de 12). Por lo tanto, .col-sm-1abarca 1 columna, .col-sm-4abarca 4 columnas,
.col-sm-6abarca 6 columnas, etc.
Nota: ¡Asegúrese de que la suma siempre sume 12!
Sugerencia: puede convertir cualquier diseño de ancho fijo en un diseño de ancho completo cambiando la .containerclase a .container-fluid:
Ejemplo: Contenedor de fluido
<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row">
<div class="col-sm-6" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>