Responsive Breakpoints

Bootstrap's grid is responsive by default, but it doesn't do anything special unless you tell it to. .col-4 means "4 columns wide at every screen size" — to make that width change depending on the viewport, you add a breakpoint infix to the class name.

The breakpoint scale

Bootstrap defines six breakpoints, each with a minimum viewport width:

| Infix | Applies at | |---|---| | (none) | all sizes | | sm | ≥576px | | md | ≥768px | | lg | ≥992px | | xl | ≥1200px | | xxl | ≥1400px |

Every breakpoint is mobile-first: a class with no infix (or a smaller infix) applies to that width and everything wider, unless a larger breakpoint's class overrides it. That's why you always design the smallest layout first, then override it as the screen grows — not the other way around.

Stacking on mobile, columns on desktop

The most common pattern is full-width columns on small screens that sit side by side once there's room:

<div class="row">
  <div class="col-12 col-md-6">
    <h2>About</h2>
    <p>This stacks full-width on phones...</p>
  </div>
  <div class="col-12 col-md-6">
    <h2>Contact</h2>
    <p>...and sits side-by-side from tablets up.</p>
  </div>
</div>

Read col-12 col-md-6 as: "12 of 12 columns by default, but 6 of 12 starting at the md breakpoint (768px) and up." Below 768px, each <div> takes the full row width and they stack vertically; at 768px and above, they sit side by side.

Combining multiple breakpoints

You can layer as many breakpoint variants as you need on one element, and each only takes effect once the viewport reaches it:

<div class="col-12 col-sm-6 col-lg-4 col-xl-3">
  One card in a responsive grid
</div>

This column is full-width on a phone, half-width on a small tablet, a third-width on a laptop, and a quarter-width on a large desktop — four layouts from one element, no media queries written by hand.

It's not just for the grid

The same infix pattern shows up across most of Bootstrap's utility classes, not only columns:

<div class="d-none d-md-block">Only visible from md and up</div>
<p class="text-center text-lg-start">Centered until lg, then left-aligned</p>

d-none d-md-block hides an element by default and shows it starting at md — a common way to swap a mobile hamburger menu for a full navbar on larger screens. Once you internalize "no infix = smallest screens and up, infix = that breakpoint and up," the same mental model applies to spacing, flexbox, and display utilities covered later in this course.