Bootstrap Grid - Empilhado para horizontal
Exemplo de grade de bootstrap: empilhado para horizontal
Vamos criar um sistema de grade básico que começa empilhado em dispositivos extra pequenos, antes de se tornar horizontal em dispositivos maiores.
O exemplo a seguir mostra um layout simples de duas colunas "empilhado para horizontal", o que significa que resultará em uma divisão de 50%/50% em todas as telas, exceto para telas extra pequenas, que serão empilhadas automaticamente (100%):
Exemplo: empilhado para 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>
Dica: Os números nas .col-sm-*classes indicam quantas colunas o div deve abranger (de 12). Portanto, .col-sm-1abrange 1 coluna, .col-sm-4abrange 4 colunas,
.col-sm-6abrange 6 colunas, etc.
Nota: Certifique-se de que a soma sempre soma 12!
Dica: você pode transformar qualquer layout de largura fixa em um layout de largura total alterando a .containerclasse para .container-fluid:
Exemplo: recipiente 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>