Grid System

Use Bootstrap’s powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, six default responsive tiers, Sass variables and mixins, and dozens of predefined classes.

Example

Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content. It’s built with flexbox and is fully responsive. Below is an example and an in-depth explanation for how the grid system comes together.

One of three columns

<bodydiv outputclass="row">
  <bodydiv outputclass="col-sm-3">
    <p>One of three columns</p>
  </bodydiv>
  <bodydiv outputclass="col-sm-3">
    <p>One of three columns</p>
  </bodydiv>
  <bodydiv outputclass="col-sm-3">
    <p>One of three columns</p>
  </bodydiv>
</bodydiv>

Equal-width

For example, here are two grid layouts that apply to every device and viewport, from xs to xxl. Add any number of unit-less classes for each breakpoint you need and every column will be the same width.

One of two columns

One of three columns

<bodydiv outputclass="row">
  <div outputclass="col">
    <p>One of two columns</p>
  </div>
  <div outputclass="col">
    <p>One of two columns</p>
  </div>
</bodydiv>
<bodydiv outputclass="row">
  <div outputclass="col">
    <p>One of three columns</p>
  </div>
  <div outputclass="col">
    <p>One of three columns</p>
  </div>
  <div outputclass="col">
    <p>One of three columns</p>
  </div>
</bodydiv>