1. Components
2. Grid System

Grid System

Use Bootstrap's powerful mobile-first flexbox grid to build layouts of all shapes and sizes. Read the Official Bootstrap Documentation for a full list of instructions and other options.

---

How it Works

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 look at how the grid comes together.

<div class="row">
  <div class="col-sm">One of three columns</div>
  <div class="col-sm">One of three columns</div>
  <div class="col-sm">One of three columns</div>
</div>

---

Setting One Column Width

Auto-layout for flexbox grid columns also means you can set the width of one column and have the sibling columns automatically resize around it.

<div class="row">
  <div class="col-sm">...</div>
  <div class="col-sm-5">...</div>
  <div class="col-sm">...</div>
</div>

---

Gutters

Gutters can be responsively adjusted by breakpoint-specific padding and negative margin utility classes.

<div class="row">...</div>
<div class="row row-sm">...</div>
<div class="row row-xs">...</div>

---

No Gutters

The gutters between columns in our predefined grid classes can be removed with .no-gutters. This removes the negative margins from .row and the horizontal padding from all immediate children columns.

<div class="row no-gutters">...</div>

---

Reordering

Use .order- classes for controlling the visual order of your content.

<div class="row">
  <div class="col-sm order-2">...</div>
  <div class="col-sm order-3">...</div>
  <div class="col-sm order-1">...</div>
</div>

---

Offsetting Columns

You can offset grid columns in two ways: our responsive .offset- grid classes and our margin utilities.

<div class="row">
  <div class="col-sm-4">...</div>
  <div class="col-sm-4 offset-sm-4">...</div>
</div>