The Grid System in Detail

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:

<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:

<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.