1. YOU ARE HERE
  2. Grid

Grid System

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.

One of three columns
One of three columns
One of three columns 
<div class="container">
    <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>
</div>
Equal width

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

1 of 2
2 of 2 
<div class="container">
    <div class="row">
        <div class="col">
            1 of 2
        </div>
        <div class="col">
            2 of 2
        </div>
    </div>
</div>
Grid options

While Bootstrap uses ems or rems for defining most sizes, pxs are used for grid breakpoints and container widths. This is because the viewport width is in pixels and does not change with the font size.

See how aspects of the Bootstrap grid system work across multiple devices with a handy table.

Extra small
<576px 		Small
≥576px 		Medium
≥768px 		Large
≥992px 		Extra large
≥1200px
Max container width None (auto) 540px 720px 960px 1140px
Class prefix .col- .col-sm- .col-md- .col-lg- .col-xl-
# of columns 12
Gutter width 30px (15px on each side of a column)
Nestable Yes
Column ordering Yes
Vertical Alignment

Use flexbox alignment utilities to vertically and horizontally align columns.

Start
Center
End 
<div class="container">
    <div class="row">
        <div class="col align-self-start">
            Start
        </div>
        <div class="col align-self-center">
            Center
        </div>
        <div class="col align-self-end">
            End
        </div>
    </div>
</div>
Horizontal Alignment

Use flexbox alignment utilities to vertically and horizontally align columns.

1
2
1
2
1
2
3 
<div class="container">
    <div class="row justify-content-end">
        <div class="col-2">
            1
        </div>
        <div class="col-2">
            2
        </div>
    </div>
    <div class="row justify-content-around">
        <div class="col-2">
            1
        </div>
        <div class="col-2">
            2
        </div>
    </div>
    <div class="row justify-content-between">
        <div class="col-2">
            1
        </div>
        <div class="col-2">
            2
        </div>
        <div class="col-2">
        3
        </div>
    </div>
</div>