Skip to content
Bootstrap

Grid System

Lay out pages with the 12-column responsive grid.

#grid#layout

Code

bootstrap
<div class="container">
  <div class="row">
    <div class="col-md-4">Sidebar</div>
    <div class="col-md-8">Main content</div>
  </div>

  <div class="row">
    <div class="col-6 col-sm-4 col-lg-2">A</div>
    <div class="col-6 col-sm-4 col-lg-2">B</div>
    <div class="col-6 col-sm-4 col-lg-2">C</div>
    <div class="col-6 col-sm-4 col-lg-2">D</div>
  </div>

  <div class="row">
    <div class="col">Auto</div>
    <div class="col">Auto</div>
    <div class="col w-50">Forced width</div>
  </div>
</div>
All snippets