Responsive Breakpoint Checker
See the responsive breakpoint your current viewport is using, compare Tailwind and Bootstrap defaults, and copy media queries while you resize.
Tailwind CSS breakpoints
Tailwind is mobile-first: unprefixed utilities apply to the base range, then prefixed utilities apply at each min-width breakpoint.
| Breakpoint | Min width | Range | Media query | Example |
|---|---|---|---|---|
| base Base | 0px | 0px-639px | base styles | grid gap-4 |
| sm Small | 40rem (640px) | 640px-767px | @media (min-width: 40rem) | sm:grid-cols-2 sm:gap-6 |
| md Medium | 48rem (768px) | 768px-1023px | @media (min-width: 48rem) | md:grid-cols-2 md:gap-6 |
| lg Large | 64rem (1024px) | 1024px-1279px | @media (min-width: 64rem) | lg:grid-cols-2 lg:gap-6 |
| xl Extra large | 80rem (1280px) | 1280px-1535px | @media (min-width: 80rem) | xl:grid-cols-2 xl:gap-6 |
| 2xl 2x large | 96rem (1536px) | 1536px+ | @media (min-width: 96rem) | 2xl:grid-cols-2 2xl:gap-6 |
Bootstrap breakpoints
Bootstrap also uses a mobile-first min-width system, with xs as the base range before the first breakpoint.
| Breakpoint | Min width | Range | Media query | Example |
|---|---|---|---|---|
| xs Extra small | 0px | 0px-575px | base styles | .col-12 |
| sm Small | 576px | 576px-767px | @media (min-width: 576px) | .col-sm-6 |
| md Medium | 768px | 768px-991px | @media (min-width: 768px) | .col-md-6 |
| lg Large | 992px | 992px-1199px | @media (min-width: 992px) | .col-lg-6 |
| xl Extra large | 1200px | 1200px-1399px | @media (min-width: 1200px) | .col-xl-6 |
| xxl Extra extra large | 1400px | 1400px+ | @media (min-width: 1400px) | .col-xxl-6 |
How to debug responsive breakpoints
Resize the browser and watch the live checker move across the breakpoint rail. For a layout bug, copy the current media query and test just below and above that width. If the issue is image sharpness rather than layout, pair this with the responsive image calculator.
Frequently asked questions
› Which width do breakpoints use?
Responsive breakpoints use the browser viewport width in CSS pixels. They do not use the physical screen resolution.
› Why are Tailwind breakpoints shown in rem?
Tailwind's default breakpoints are defined in rem units. The table shows the rem value and the default pixel equivalent for quick debugging.
› Should I test exact breakpoint widths?
Yes. Test just below, at, and above important breakpoints, because many layout bugs appear around the transition point.