Responsive Breakpoints
Learn Bootstrap's sm, md, lg, xl, and xxl breakpoints, and how to use responsive column classes like col-md-6 to adapt layouts to any screen size.
Introduction
A layout that looks great on a desktop monitor often looks broken on a phone. Bootstrap solves this with breakpoints, specific screen-width thresholds where your layout can change behavior. This lesson covers Bootstrap's breakpoint scale and how to use it to build layouts that adapt automatically to any device.
- What a breakpoint is and why it matters.
- Bootstrap's five responsive breakpoints: sm, md, lg, xl, and xxl.
- How the mobile-first approach shapes the way you write grid classes.
- How to use classes like col-md-6 to change column width at different screen sizes.
What is a Breakpoint?
A breakpoint is a defined viewport width at which your layout switches to a different arrangement. For example, you might want three columns side by side on a wide desktop screen, but stacked on top of each other on a narrow phone screen. Breakpoints are the tool that makes this possible without writing custom media queries yourself.
Bootstrap's Breakpoint Scale
Bootstrap defines five responsive breakpoints beyond the base (extra-small) tier. Each one corresponds to a minimum viewport width and has its own infix used in class names.
| Breakpoint | Class Infix | Minimum Width | Typical Device |
|---|---|---|---|
| Extra small | (none) | <576px | Small phones |
| Small | sm | ≥576px | Large phones |
| Medium | md | ≥768px | Tablets |
| Large | lg | ≥992px | Laptops |
| Extra large | xl | ≥1200px | Desktops |
| Extra extra large | xxl | ≥1400px | Large monitors |
The Mobile-First Approach
Bootstrap is built mobile-first, meaning styles without a breakpoint infix (like `.col-6`) apply to all screen sizes starting from the smallest, and styles with a breakpoint infix (like `.col-md-6`) only take effect from that breakpoint upward. This means you design for the smallest screen first, then add classes to change the layout as the screen gets larger, rather than the other way around.
Read `.col-md-6` as "6 columns wide from the medium breakpoint and up." Below the md breakpoint, that column falls back to whatever smaller-breakpoint or base class is also applied.
Responsive Column Classes
Responsive column classes follow the pattern `.col-{breakpoint}-{number}`. This lets a single element behave differently depending on the screen size viewing it. A very common pattern is to stack columns full-width on mobile, then arrange them side by side starting at a chosen breakpoint.
<div class="container"> <div class="row"> <div class="col-12 col-md-6"> <h4>Left Panel</h4> <p>Full width on mobile, half width from md and up.</p> </div> <div class="col-12 col-md-6"> <h4>Right Panel</h4> <p>Full width on mobile, half width from md and up.</p> </div> </div></div>Click Run to see what this code prints.
Combining Multiple Breakpoints
You can stack several responsive classes on the same element to define different widths at multiple breakpoints simultaneously. Bootstrap applies whichever rule matches the current, or next-lower matching, breakpoint.
<div class="row"> <div class="col-12 col-sm-6 col-lg-4"> Card </div></div>Click Run to see what this code prints.
Common Mistakes
- Only testing a layout on a desktop browser and never resizing to check mobile behavior.
- Using a large breakpoint infix like xl when a smaller one like md would better match real device widths.
- Forgetting that unprefixed classes like .col-6 apply at every screen size, not just small ones.
- Adding conflicting classes, such as col-md-6 and col-md-4 on the same element, where only the last one in the stylesheet wins.
Best Practices
- Design and test your layout starting from the smallest screen size, then work upward.
- Use the browser's device toolbar to test your layout at each Bootstrap breakpoint.
- Prefer md and lg breakpoints for most layout changes, since they map well to tablets and laptops.
- Keep responsive class combinations as simple as possible; too many breakpoints on one element gets hard to maintain.
Frequently Asked Questions
It means the column takes 6 of 12 grid units (half width) starting at the medium breakpoint (768px) and remains that width at larger breakpoints unless overridden.
Yes, if you compile Bootstrap from its Sass source, you can edit the $grid-breakpoints variable map to define your own custom widths.
The extra-small tier is the default, mobile-first base, so its classes (like .col-6) have no infix at all; the infix only appears starting from sm.
Key Takeaways
- Bootstrap defines five breakpoints: sm, md, lg, xl, and xxl, plus an unprefixed base tier.
- Bootstrap follows a mobile-first approach: unprefixed classes apply everywhere, prefixed classes apply "and up."
- Responsive column classes follow the pattern col-{breakpoint}-{number}, like col-md-6.
- Multiple responsive classes can be combined on one element to change its width at several breakpoints.
Summary
Breakpoints are what transform Bootstrap's grid from a static layout tool into a fully responsive one that adapts to any screen. With rows, columns, and breakpoints under your belt, the next lesson turns to styling text using Bootstrap's typography classes.