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 |
|---|---|---|---|---|
| baseBase | 0px | 0px-639px | base styles | grid gap-4 |
| smSmall | 40rem (640px) | 640px-767px | @media (min-width: 40rem) | sm:grid-cols-2 sm:gap-6 |
| mdMedium | 48rem (768px) | 768px-1023px | @media (min-width: 48rem) | md:grid-cols-2 md:gap-6 |
| lgLarge | 64rem (1024px) | 1024px-1279px | @media (min-width: 64rem) | lg:grid-cols-2 lg:gap-6 |
| xlExtra large | 80rem (1280px) | 1280px-1535px | @media (min-width: 80rem) | xl:grid-cols-2 xl:gap-6 |
| 2xl2x 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 |
|---|---|---|---|---|
| xsExtra small | 0px | 0px-575px | base styles | .col-12 |
| smSmall | 576px | 576px-767px | @media (min-width: 576px) | .col-sm-6 |
| mdMedium | 768px | 768px-991px | @media (min-width: 768px) | .col-md-6 |
| lgLarge | 992px | 992px-1199px | @media (min-width: 992px) | .col-lg-6 |
| xlExtra large | 1200px | 1200px-1399px | @media (min-width: 1200px) | .col-xl-6 |
| xxlExtra 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 CheckerSee your browser's CSS viewport size and window size live. Updates as you resize — with current responsive breakpoint for developers.
- Tailwind BreakpointsSee which Tailwind CSS breakpoint your viewport is currently using, with the default breakpoints, rem values, pixel equivalents and media query snippets.
- Bootstrap BreakpointsCheck the active Bootstrap breakpoint live and reference the default xs, sm, md, lg, xl and xxl media query widths.
- CSS Media Query BreakpointsReference common CSS media query widths, test your current viewport, and copy mobile-first queries for responsive layouts.
- Responsive Design TestingTest common responsive design scenarios against your live viewport: navigation, grids, forms, modals, galleries, data tables and dashboards.
- Responsive Image CalculatorCalculate responsive image export sizes from CSS pixels and DPR. Generate srcset, sizes and CSS image-set snippets for crisp images.