WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

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 below example will help shows a simple "stacked-to-horizontal" two-column layout:

Example: Stacked-to-horizontal

<div class="container">
  <h1>Hello Bootstrap!</h1>
  <div class="row">
    <div class="col-sm-6" style="background-color:#78ceed;">
      <p>I'm paragraph text</p>
    </div>
    <div class="col-sm-6" style="background-color:#95dd87;">
      <p>I'm paragraph text</p>
    </div>
  </div>
</div>
Try it Yourself »

Example: Fluid container

<div class="container-fluid">
  <h1>Hello Bootstrap!</h1>
  <div class="row">
    <div class="col-sm-6" style="background-color:#78ceed;">
      <p>I'm paragraph text</p>
    </div>
    <div class="col-sm-6" style="background-color:#95dd87;">
      <p>I'm paragraph text</p>
    </div>
  </div>
</div>
Try it Yourself »