Bootstrap Responsive Grid Setup
Master the 12-column grid system in Bootstrap to layout your page beautifully across mobile and desktop.
The biggest advantage of Bootstrap is its Grid System. It uses a 12 column layout. You specify how many columns an element should take on different screen sizes using col-xs, col-md, col-lg.
A 3-Column Layout
<div class="container">
<div class="row">
<div class="col-12 col-md-4">
<!-- Takes full width on mobile (12) -->
<!-- Takes 4/12 (one third) on desktop -->
<h3>Column 1</h3>
</div>
<div class="col-12 col-md-4">
<h3>Column 2</h3>
</div>
<div class="col-12 col-md-4">
<h3>Column 3</h3>
</div>
</div>
</div>
Check out the Live Demo! Resize your browser window and watch how the columns smartly stack on top of each other dynamically.