Bootstrap Grid – Stacked-to-horizontal

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>

 

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>

Leave a Reply

Your email address will not be published. Required fields are marked *