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 »