Responsive Breakpoint Checker
See the responsive breakpoint your current viewport is using, compare Tailwind and Bootstrap defaults, and copy media queries while you resize.
Critical widths to test
Exact widths around the selected Tailwind threshold.
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 |
Debug responsive breakpoints
Resize the browser, identify the active framework breakpoint, then test the pixel below and above the threshold where the layout changes.
- 1Resize the viewport
- 2Copy the media query
- 3Test boundary widths
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.
Related tools
- Viewport Size Checker See your browser's CSS viewport size and window size live. Updates as you resize — with current responsive breakpoint for developers.
- Tailwind Breakpoints See which Tailwind CSS breakpoint your viewport is currently using, with the default breakpoints, rem values, pixel equivalents and media query snippets.
- Bootstrap Breakpoints Check the active Bootstrap breakpoint live and reference the default xs, sm, md, lg, xl and xxl media query widths.
- CSS Media Query Breakpoints Reference common CSS media query widths, test your current viewport, and copy mobile-first queries for responsive layouts.
- Responsive Design Testing Test common responsive design scenarios against your live viewport: navigation, grids, forms, modals, galleries, data tables and dashboards.
- Responsive Image Calculator Calculate responsive image export sizes from CSS pixels and DPR. Generate srcset, sizes and CSS image-set snippets for crisp images.