Responsive breakpoints

This is part of the reference hub. A responsive breakpoint is the width at which a layout switches to a different design. When a bug reproduces only at certain widths, it's usually sitting right on or between these values.

Tailwind CSS (mobile-first, min-width)

Name	Min width
sm	640px
md	768px
lg	1024px
xl	1280px
2xl	1536px

Bootstrap 5 (mobile-first, min-width)

Name	Min width
sm	576px
md	768px
lg	992px
xl	1200px
xxl	1400px

Material Design (window size classes)

Class	Range
Compact	< 600px
Medium	600–839px
Expanded	840px+

Choosing breakpoints

Match breakpoints to content, not devices. Pick the widths where your own layout starts to strain (columns too narrow, text too wide) rather than the dimensions of this year's phones. Device sizes drift; your content's comfortable range doesn't. To reproduce a breakpoint bug, set the viewport to a width just inside the failing range (the viewport sizes reference lists common targets) and capture there.

Frequently asked questions

Should I match my breakpoints to specific devices?

No. Match them to your content. Pick the widths where your layout starts to break, not the widths of particular phones. Device sizes shift every year; the point where your columns get too cramped doesn't.

Why does my bug only show up between two breakpoints?

Because the layout at an in-between width inherits the rules from the lower breakpoint. Reproduce it by setting the viewport to a width just inside that range; the viewport-sizes reference lists common targets.

Are these min-width or max-width breakpoints?

Tailwind and Bootstrap are mobile-first: the breakpoint is a min-width, and styles apply at that width and up. Material's tiers describe ranges. Always check whether a given rule is min- or max-width before reproducing a bug.