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>