Grid

A powerful mobile-first flexbox grid for building layouts of all shapes and sizes, thanks to a a twelve column system, five default responsive breakpoints and dozens of predefined classes.

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.

New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, terminology, guidelines, and code snippets.

One of three columns
One of three columns
One of three columns

<div class="container">
	<div class="row">
		<div class="col-sm border border-primary p-3">One of three columns</div>
		<div class="col-sm border border-primary p-3">One of three columns</div>
		<div class="col-sm border border-primary p-3">One of three columns</div>
	</div>
</div>

The above example creates three equal-width columns on small, medium, large, and extra large devices using our predefined grid classes. Those columns are centered in the page with the parent .container.

Breaking it down, it works as follows:

  • Containers providea means to center and horizontally pad your site’s contents. Use .container for a responsive width or .container-fluid for width: 100% across all viewports and device sizes.
  • Rows are wrappers for columns. Each column has horizontal padding (called a gutter) for controlling the space between them. This padding is then counteracted on the rows with a negative margin, resulting in column content being visually aligned down the left side.
  • In a grid layout, content must be placed within columns and only columns may be immediate children of rows.
  • Thanks to flexbox, grid columns without a specified width will automatically layout as equal width columns. For example, four instances of .col-sm will each automatically be 25% wide from the small breakpoint and up. See the auto-layout columns section for more examples. TODO
  • Column classes indicate the number of columns you’d like to use out of the possible 12 per row. So, if you want three equal-width columns across, you can use .col-4.
  • Column widths are set in percentages, so they’re always fluid and sized relative to their parent element.
  • Columns have horizontal padding to create the gutters between individual columns, however, you can remove the margin from rows and padding from columns with .no-gutters on the .row.
  • To make the grid responsive, there are five grid breakpoints, one for each responsive breakpoint: all breakpoints (xs), small (sm), medium (md), large (lg), and extra large (xl).
  • Grid breakpoints are based on minimum width media queries, meaning they apply to that one breakpoint and all those above it (e.g., .col-sm-4 applies to small, medium, large, and extra large devices, but not the first xs breakpoint).

Grid options

Define columns using .col-{breakpoint}-{width}

Where breakpoint can be

  • none (for xs), for all viewport widths
  • sm for viewports >= 576px, with a maximum container width of 540px
  • md for viewports >= 786px, with a maximum container width of 720px
  • lg for viewports >= 992px, with a maximum container width of 960px
  • xl for viewports >= 1200px, with a maximum container width of 1140px

Where width can be

  • none, for auto-width columns
  • 1 to 12, where 1 is 1/12th of the width and 12 is 12/12th of the wdith (full-width).

Such as .col, .col-6 or .col-md-2.

Auto-layout columns

Utilize column classes without an explicit numbered class to let columns automatically determine their width.

Equal-width

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
1 of 3
2 of 3
3 of 3 

<div class="container">
  <div class="row">
    <div class="col border border-primary py-2">
      1 of 2
    </div>
    <div class="col border border-primary py-2">
      2 of 2
    </div>
  </div>
  <div class="row mt-2">
    <div class="col border border-primary py-2">
      1 of 3
    </div>
    <div class="col border border-primary py-2">
      2 of 3
    </div>
    <div class="col border border-primary py-2">
      3 of 3
    </div>
  </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.

1 of 3
2 of 3 (wider)
3 of 3 

<div class="container">
  <div class="row">
    <div class="col border border-primary py-2">
      1 of 3
    </div>
    <div class="col-6 border border-primary py-2">
      2 of 3 (wider)
    </div>
    <div class="col border border-primary py-2">
      3 of 3
    </div>
  </div>
</div>

Variable width content

Use .col-{breakpoint}-auto classes to size column based on the natural width of their content.

1 of 3
Variable width content
3 of 3
1 of 3
Variable width content
3 of 3 

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col-lg-2 border border-primary py-2">
      1 of 3
    </div>
    <div class="col-md-auto border border-primary py-2">
      Variable width content
    </div>
    <div class="col col-lg-2 border border-primary py-2">
      3 of 3
    </div>
  </div>
  <div class="row mt-2">
    <div class="col border border-primary py-2">
      1 of 3
    </div>
    <div class="col-md-auto border border-primary py-2">
      Variable width content
    </div>
    <div class="col col-lg-2 border border-primary py-2">
      3 of 3
    </div>
  </div>
</div>

Equal-width multi-row

Create equal-width columns that span multiple rows by inserting a .w-100 where you want the columns to break to a new line.

col
col
col
col 

<div class="container">
  <div class="row">
    <div class="col border border-primary py-2">
      col
    </div>
    <div class="col border border-primary py-2">
      col
    </div>
	<div class="w-100"></div>
    <div class="col border border-primary py-2">
      col
    </div>
    <div class="col border border-primary py-2">
      col
    </div>
  </div>
</div>

Responsive classes

Determine when columns should stack horizontally on certain device sizes such as desktop, tablet or mobile, using responsive classes. See how the example layouts below change by resizing the viewport width.

All breakpoints

Use .col or .col-{width} for columns that are horizontal on all viewports widths.

col
col-6
col 

<div class="container">
  <div class="row">
    <div class="col border border-primary py-2">
      col
    </div>
    <div class="col-6 border border-primary py-2">
      col-6
    </div>
    <div class="col border border-primary py-2">
      col
    </div>
  </div>
</div>

Breakpoint specific

Using .col-{breakpoint}-{width}, where breakpoint is any value from sm, md, lg or xl, to determine the stacking orientation of columns per breakpoint. For example, using .col-md-{width}, columns will start out stacked vertically and turn horizontal above the md breakpoint. With this, you can create responsive layouts that change depending on the device’s viewport width. Columns in the below example will stack vertically with full width on small devices (below md breakpoint), but appear next to eachother with the specified width on devices larger than the md breakpoint.

col
col-6
col 

<div class="container">
  <div class="row">
    <div class="col-md border border-primary py-2">
      col
    </div>
    <div class="col-md-6 border border-primary py-2">
      col-6
    </div>
    <div class="col-md border border-primary py-2">
      col
    </div>
  </div>
</div>

Mix and match

You can mix and match breakpoints and widths to achieve varying widths per device.

.col-12 .col-md-8
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6
.col-6

<div class="container">
  <!-- Stack the columns on mobile by making one full-width and the other half-width -->
  <div class="row">
    <div class="col-12 col-md-8 border border-primary py-2">.col-12 .col-md-8</div>
    <div class="col-6 col-md-4 border border-primary py-2">.col-6 .col-md-4</div>
  </div>

  <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
  <div class="row mt-3">
    <div class="col-6 col-md-4 border border-primary py-2">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4 border border-primary py-2">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4 border border-primary py-2">.col-6 .col-md-4</div>
  </div>

  <!-- Columns are always 50% wide, on mobile and desktop -->
  <div class="row mt-3">
    <div class="col-6 border border-primary py-2">.col-6</div>
    <div class="col-6 border border-primary py-2">.col-6</div>
  </div>
</div>

Gutters

Gutters can be responsively adjusted by breakpoint-specific padding and negative margin utility classes. To change the gutters in a given row, pair a negative margin utility on the .row and matching padding utilities on the .cols. The .container or .container-fluid parent may need to be adjusted too to avoid unwanted overflow, using again matching padding utility.

Here’s an example of customizing the grid at the large (lg) breakpoint and above. We’ve increased the .col padding with .px-lg-5, counteracted that with .mx-lg-n5 on the parent .row and then adjusted the .container wrapper with .px-lg-5.

Custom column padding
Custom column padding

<div class="container px-lg-5">
  <div class="row mx-lg-n5">
    <div class="col py-3 px-lg-5 border border-primary">Custom column padding</div>
    <div class="col py-3 px-lg-5 border border-primary">Custom column padding</div>
  </div>
</div>

Row columns

Set the amount of columns on a row using .row-cols-{breakpoint}-{columns}, where breakpoint is any value from sm, md, lg or xl and columms is the amount of columns, from 1 to 12, such as .row-cols-5 and .row-cols-md-2.

.col
.col
.col
.col

<div class="container">
  <div class="row row-cols-sm-2 row-cols-md-4">
    <div class="col border border-primary py-2">.col</div>
    <div class="col border border-primary py-2">.col</div>
    <div class="col border border-primary py-2">.col</div>
    <div class="col border border-primary py-2">.col</div>
  </div>

Alignment

Use flexbox alignment utilities to vertically and horizontally align columns. Internet Explorer 10-11 do not support vertical alignment of flex items when the flex container has a min-height as shown below.

Vertical alignment

One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns 

<div class="container">
  <div class="row align-items-start border border-primary" style="height:100px;">
    <div class="col py-2 border border-primary">
      One of three columns
    </div>
    <div class="col py-2 border border-primary">
      One of three columns
    </div>
    <div class="col py-2 border border-primary">
      One of three columns
    </div>
  </div>
  <div class="row align-items-center border border-primary" style="height:100px;">
    <div class="col py-2 border border-primary">
      One of three columns
    </div>
    <div class="col py-2 border border-primary">
      One of three columns
    </div>
    <div class="col py-2 border border-primary">
      One of three columns
    </div>
  </div>
  <div class="row align-items-end border border-primary" style="height:100px;">
    <div class="col py-2 border border-primary">
      One of three columns
    </div>
    <div class="col py-2 border border-primary">
      One of three columns
    </div>
    <div class="col py-2 border border-primary">
      One of three columns
    </div>
  </div>
</div>
One of three columns
One of three columns
One of three columns 

<div class="container">
  <div class="row border border-primary" style="height:130px;">
    <div class="col align-self-start py-2 border border-primary">
      One of three columns
    </div>
    <div class="col align-self-center py-2 border border-primary">
      One of three columns
    </div>
    <div class="col align-self-end py-2 border border-primary">
      One of three columns
    </div>
  </div>
</div>

Horizontal alignment

One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns 

<div class="container">
  <div class="row justify-content-start border border-primary mt-2">
    <div class="col-4 border border-primary py-2">
      One of two columns
    </div>
    <div class="col-4 border border-primary py-2">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-center border border-primary mt-2">
    <div class="col-4 border border-primary py-2">
      One of two columns
    </div>
    <div class="col-4 border border-primary py-2">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-end border border-primary mt-2">
    <div class="col-4 border border-primary py-2">
      One of two columns
    </div>
    <div class="col-4 border border-primary py-2">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-around border border-primary mt-2">
    <div class="col-4 border border-primary py-2">
      One of two columns
    </div>
    <div class="col-4 border border-primary py-2">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-between border border-primary mt-2">
    <div class="col-4 border border-primary py-2">
      One of two columns
    </div>
    <div class="col-4 border border-primary py-2">
      One of two columns
    </div>
  </div>
</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.

.col-12 .col-sm-6 .col-md-8
.col-6 .col-md-4

<div class="container">
  <div class="row no-gutters">
    <div class="col-12 col-sm-6 col-md-8 border border-primary py-2">.col-12 .col-sm-6 .col-md-8</div>
    <div class="col-6 col-md-4 border border-primary py-2">.col-6 .col-md-4</div>
  </div>
</div>

Column wrapping

If the total width of columns in a row exceeds 12, each group of extra columns will as one unit, wrap onto a new line.

.col-9
.col-4
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
.col-6
Subsequent columns continue along the new line.


<div class="container">
  <div class="row">
    <div class="col-9 py-2 border border-primary">.col-9</div>
    <div class="col-4 py-2 border border-primary">.col-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
    <div class="col-6 py-2 border border-primary">.col-6<br>Subsequent columns continue along the new line.</div>
  </div>
</div>

Column breaks

Breaking columns to a new line in flexbox requires a small hack: add an element with width: 100% wherever you want to wrap your columns to a new line. Normally this is accomplished with multiple .rows, but not every implementation method can account for this. This can be made breakpoint specific using responsive display utilities.

.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4

<div class="container">
  <div class="row">
    <div class="col-6 col-sm-4 py-2 border border-primary">.col-6 .col-sm-4</div>
    <div class="col-6 col-sm-4 py-2 border border-primary">.col-6 .col-sm-4</div>

    <!-- Force next columns to break to new line at md breakpoint and up -->
    <div class="w-100 d-none d-md-block"></div>

    <div class="col-6 col-sm-4 py-2 border border-primary">.col-6 .col-sm-4</div>
    <div class="col-6 col-sm-4 py-2 border border-primary">.col-6 .col-sm-4</div>
  </div>
</div>

Reordering

Order classes

Use .order-{breakpoint}-{order} classes for controlling the visual order of your content. Where breakpoint may be empty or any of the breakpoints, and order can be any value from 1 to 12, such as .order-1 and .order-md-6.

First, but unordered
Second, but last
Third, but first 

<div class="container">
  <div class="row">
    <div class="col py-2 border border-primary">
      First, but unordered
    </div>
    <div class="col order-12 py-2 border border-primary">
      Second, but last
    </div>
    <div class="col order-1 py-2 border border-primary">
      Third, but first
    </div>
  </div>
</div>

Additionally, the value of order may also be first or last to apply order: -1 and order: 13 respectively.

First, but last
Second, but unordered
Third, but first 

<div class="container">
  <div class="row">
    <div class="col order-last py-2 border border-primary">
      First, but last
    </div>
    <div class="col py-2 border border-primary">
      Second, but unordered
    </div>
    <div class="col order-first py-2 border border-primary">
      Third, but first
    </div>
  </div>
</div>

Offsetting columns

Columns can be offset in two ways: using offset classes, and using margin utilities (such as .mx-auto). The offset classes are specified as .offset-{breakpoint}-{offset}, where breakpoint may be empty or any of the breakpoints, and offset can be any value from 1 to 12 to specify the column width that should be offset.

Offset classes

.col-md-4
.col-md-4 .offset-md-4
.col-md-3 .offset-md-3
.col-md-3 .offset-md-3
.col-md-6 .offset-md-3

<div class="container">
  <div class="row">
    <div class="col-md-4 py border border-primary">.col-md-4</div>
    <div class="col-md-4 offset-md-4 py border border-primary">.col-md-4 .offset-md-4</div>
  </div>
  <div class="row mt-2">
    <div class="col-md-3 offset-md-3 py border border-primary">.col-md-3 .offset-md-3</div>
    <div class="col-md-3 offset-md-3 py border border-primary">.col-md-3 .offset-md-3</div>
  </div>
  <div class="row mt-2">
    <div class="col-md-6 offset-md-3 py border border-primary">.col-md-6 .offset-md-3</div>
  </div>
</div>

In addition to column clearing at responsive breakpoints, you may need to reset offsets.


<div class="container">
  <div class="row">
    <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
    <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
  </div>
  <div class="row">
    <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
    <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
  </div>
</div>

Margin utilities

Use margin utilities like .mr-auto to force sibling columns away from one another.

.col-md-4
.col-md-4 .ml-auto
.col-md-3 .ml-md-auto
.col-md-3 .ml-md-auto
.col-auto .mr-auto
.col-auto

<div class="container">
  <div class="row">
    <div class="col-md-4 py-2 border border-primary">.col-md-4</div>
    <div class="col-md-4 ml-auto py-2 border border-primary">.col-md-4 .ml-auto</div>
  </div>
  <div class="row mt-2">
    <div class="col-md-3 ml-md-auto py-2 border border-primary">.col-md-3 .ml-md-auto</div>
    <div class="col-md-3 ml-md-auto py-2 border border-primary">.col-md-3 .ml-md-auto</div>
  </div>
  <div class="row mt-2">
    <div class="col-auto mr-auto py-2 border border-primary">.col-auto .mr-auto</div>
    <div class="col-auto py-2 border border-primary">.col-auto</div>
  </div>
</div>

Nesting

To nest your content with the default grid, add a new .row and set of columns within an existing column.

Level 1: .col-sm-9
Level 2: .col-8 .col-sm-6
Level 2: .col-4 .col-sm-6 

<div class="container">
  <div class="row">
    <div class="col-sm-9 py-2 border border-primary">
      Level 1: .col-sm-9
      <div class="row">
        <div class="col-8 col-sm-6 py-2 border border-primary">
          Level 2: .col-8 .col-sm-6
        </div>
        <div class="col-4 col-sm-6 py-2 border border-primary">
          Level 2: .col-4 .col-sm-6
        </div>
      </div>
    </div>
  </div>
</div>

Read more

Overview Design