Flex Grid

A 12-column flexbox grid in the Bootstrap tradition: a container wraps rows, and rows wrap columns.

Container

• container — centered, responsive max-widths (540 / 720 / 960 / 1140 / 1320px)
• container-fluid — full width at every breakpoint

Rows & columns

<div class="container">
  <div class="row">
    <div class="col-6">Half</div>
    <div class="col-6">Half</div>
  </div>

  <div class="row">
    <div class="col-12 col-md-4">Sidebar</div>
    <div class="col-12 col-md-8">Main</div>
  </div>
</div>

• col — equal-width auto column
• col-{1–12} — explicit width out of 12
• col-{breakpoint}-{1–12} — responsive widths

Breakpoints