Bootstrap Grid Example: Stacked-to-horizontal
We will create a basic grid system that starts out stacked on mobiles/tablets (small devices), before becoming horizontal on desktops (medium/large devices).
The following example shows a simple "stacked-to-horizontal" two-column layout, meaning it will result in a 50%/50% split on all screens, except for extra small screens, which it will automatically stack (100%):
col-sm-6
col-sm-6
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>
Try it Yourself »Tip: The numbers in the .col-sm-* classes indicates how many columns the
div should
span (out of 12). So, .col-sm-1 spans 1 column, .col-sm-4 spans 4 columns,
.col-sm-6 spans 6 columns, etc.
Note: Make sure that the
sum always adds up to 12!
Tip: You can turn any fixed-width layout into a full-width layout by changing
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>
Try it Yourself »