Bootstrap Grid - Stacked-to-horizontal

Bootstrap Grid Example: Stacked-to-horizontal

We will create a basic grid system that starts out stacked on extra small devices, before becoming horizontal on larger 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

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 »

❮ Previous Next ❯