The Grid System

Almost everything Bootstrap does for layout comes back to one idea: every row is divided into 12 equal columns, and you decide how many of those 12 columns each piece of content takes up.

Row and col

A row holds one or more col elements. With no number specified, Bootstrap splits the available columns evenly among however many col elements you put inside the row:

HTML index.html
<div class="container">
  <div class="row">
    <div class="col">One</div>
    <div class="col">Two</div>
    <div class="col">Three</div>
  </div>
</div>
Rendered result
Three equal-width boxes sitting side by side, each taking up exactly one-third of the row's width, with a small gutter of space between them. Shrink the browser and they stay side by side, getting narrower together — plain col with no number has no responsive breakpoint of its own.

Sizing columns explicitly

Adding a number after col- claims that many of the row's 12 columns, out of the total. The rest of the columns share whatever space is left:

HTML index.html
<div class="container">
  <div class="row">
    <div class="col-8">Main content</div>
    <div class="col-4">Sidebar</div>
  </div>
</div>
Rendered result
A wide "Main content" box taking up roughly two-thirds of the row, with a narrower "Sidebar" box taking up the remaining third, sitting side by side — the classic content-plus-sidebar layout, in two lines of HTML.

col-8 and col-4 add up to 12, exactly filling the row. If the numbers in a row add up to less than 12, the columns just leave empty space; if they add up to more than 12, the extra columns wrap onto a new line rather than overflowing.

Responsive breakpoints

The real power of the grid is that column sizing can change per screen size. col-md-6 means "take up 6 of 12 columns from the md breakpoint (768px) upward, but stack full-width below that":

HTML index.html
<div class="container">
  <div class="row">
    <div class="col-md-6">Left</div>
    <div class="col-md-6">Right</div>
  </div>
</div>
Rendered result
On a wide (desktop-sized) browser window: "Left" and "Right" sit side by side, each exactly half the row. On a narrow (phone-sized) window: they stack fully on top of each other, each taking the full width — no horizontal scrolling, no cramped columns on a small screen.

Since no explicit class was given for screens narrower than md, Bootstrap falls back to its default of stacking each column at full width — which is exactly the mobile-friendly behavior you want without writing a single media query yourself.

Note: column numbers in a row don't have to add up to exactly 12 — but when they do exceed 12, Bootstrap wraps the overflow onto a new line inside the same row rather than shrinking columns to fit. If a layout looks unexpectedly broken into two rows, add up your column numbers first; that's almost always the cause.
PreviousIntroduction