CSS breakpoints for responsive design: a developer's guide
A practical guide to responsive breakpoints — the common Tailwind and Bootstrap values, how to choose your own, and why you should design mobile-first.
게시일 2026년 10월 2일
Breakpoints are the screen widths where your layout changes. Get them right and your site adapts gracefully from phone to ultrawide; get them wrong and you’ll be fighting awkward in-between states forever. Here’s a practical approach.
What a breakpoint is
A breakpoint is simply a min-width (or max-width) in a media query where you change the layout:
/* mobile-first: base styles apply everywhere, then scale up */
.grid { grid-template-columns: 1fr; }
@media (min-width: 768px) {
.grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
.grid { grid-template-columns: repeat(3, 1fr); }
}Note the word width — breakpoints key off the browser’s CSS (logical) pixels, not the panel’s physical pixels. A 4K phone and a 1080p laptop can report the same CSS width because of device pixel ratio.
The common frameworks’ defaults
You rarely need to invent breakpoints from scratch — the big frameworks have well-tested defaults:
| Label | Tailwind CSS | Bootstrap 5 |
|---|---|---|
| Small | sm 640px |
sm 576px |
| Medium | md 768px |
md 768px |
| Large | lg 1024px |
lg 992px |
| Extra large | xl 1280px |
xl 1200px |
| 2XL | 2xl 1536px |
xxl 1400px |
Both are mobile-first: styles with no breakpoint apply to the smallest screens, and each breakpoint layers changes on top as the viewport grows.
How to choose your own
Design for content, not devices. Add a breakpoint when your layout breaks — a line gets too long to read, or a grid gets too cramped — not when you hit a specific phone’s width.
Practical rules that hold up well:
- Start mobile-first. Write the single-column layout first, then widen.
- Cap line length. Long-form text gets hard to read past ~70 characters; introduce a max-width or a second column before that.
- Test the in-between. The worst bugs live at 800–1000px, not at the exact framework breakpoints. Drag your window slowly.
- Mind the fold on landscape phones. Short heights matter as much as narrow widths.
See your breakpoints live
The hard part of debugging responsive layouts is knowing which breakpoint is active right now. Our tools page includes a live breakpoint indicator that shows the current Tailwind and Bootstrap tier as you resize, plus a media-query generator that writes the CSS for any width you pick. Pair it with the resolution detector to confirm the CSS pixel width your visitors actually report.