CSS breakpoints for responsive design: a developer's guide

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.