The Grid System in Detail

Bootstrap's grid uses 12 columns and six responsive breakpoints. Columns are placed inside rows, and rows go inside containers.

The breakpoints

How column classes work

• .col equal width, all sizes.
• .col-sm-6 half width starting at small.
• .col-md-4 one third starting at medium.
• .col-lg-3 one quarter starting at large.

Row and container rules

• Containers center content and add gutters.
• Rows (.row) hold columns and provide negative gutters.
• Column numbers in a row should add up to 12.

Auto layout

.col columns share the space equally and resize automatically:

html
<div class="row">
  <div class="col">Auto</div>
  <div class="col">Auto</div>
  <div class="col">Auto</div>
</div>

Combining breakpoints

You can combine breakpoints to change the layout at different screen sizes:

html
<div class="row">
  <div class="col-sm-6 col-md-4 col-lg-3">Responsive</div>
  <div class="col-sm-6 col-md-4 col-lg-3">Responsive</div>
  <div class="col-sm-6 col-md-4 col-lg-3">Responsive</div>
  <div class="col-sm-6 col-md-4 col-lg-3">Responsive</div>
</div>

Here each item is half width on small screens, one third on medium, and one quarter on large.

TL;DR

• 12 columns, 6 breakpoints.
• .col-{infix}-{number} sets widths per breakpoint.
• Combine infixes for responsive layouts.
• Rows go in containers, columns go in rows.