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. The <grid-col> element supports @breakpoint and @colspan attributes to define the column width at different screen sizes.

One of three columns

<grid-row>
  <grid-col breakpoint="sm" colspan="3">
    <p>One of three columns</p>
  </grid-col>
  <grid-col breakpoint="sm" colspan="3">
    <p>One of three columns</p>
  </grid-col>
  <grid-col breakpoint="sm" colspan="3">
    <p>One of three columns</p>
  </grid-col>
</grid-row>

<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

<grid-row>
  <grid-col>
    <p>One of two columns</p>
  </grid-col>
  <grid-col>
    <p>One of two columns</p>
  </grid-col>
</grid-row>
<grid-row>
  <grid-col>
    <p>One of three columns</p>
  </grid-col>
  <grid-col>
    <p>One of three columns</p>
  </grid-col>
  <grid-col>
    <p>One of three columns</p>
  </grid-col>
</grid-row>

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