Bootstrap Grids
BS Stacked/horizontal
Bootstrap Grid Example: Stacked-to-horizontal
We will design a basic grid system that begins stacked on extra tiny devices and becomes horizontal on larger ones.
The following example depicts a simple “stacked-to-horizontal” two-column layout, which results in a 50%/50% split on all screens except for particularly small screens, which are automatically stacked (100%):
---- IMAGE MUKAVU ----
Example: Stacked-to-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>
Tip: The values in the .col-sm-* classes represent the number of columns the div should span (out of 12). So, .col-sm-1 spans a single column, .col-sm-4 spans four columns, .col-sm-6 spans six columns, etc.
Make sure that the sum always equals 12!
Tip: To convert any fixed-width layout into a full-width layout, change the .container class to .container-fluid:
Example: Fluid container
<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>
