What a breakpoint is
A responsive breakpoint is a viewport width where CSS layout rules change. Navigation, grid columns, sidebars, spacing, and typography often switch behavior at these widths.
Tailwind vs Bootstrap names
This reference compares Tailwind CSS v4 defaults, expressed in rem, with Bootstrap 5.3 defaults, expressed in px. At a 16px initial font size both use a 768px md threshold, but lg starts at 1024px in Tailwind and 992px in Bootstrap. Custom themes and Sass variables can replace these defaults.
Why monitor size is not enough
A large monitor can show a narrow viewport if the browser window is not maximized. Always test the active breakpoint using the current viewport width rather than assuming from device or monitor size.
Custom breakpoint testing
Inspect the compiled media query, then test just below, at, and above its threshold. In media queries, rem resolves against the initial font size, which can reflect a browser font preference; changing the page html font-size does not redefine that threshold. Record the framework version, custom configuration, browser font preference, zoom, and CSS viewport width.
Breakpoint reference
Defaults checked September 5, 2026: Tailwind CSS v4 uses rem breakpoints; Bootstrap 5.3 uses px. Pixel equivalents below assume a 16px initial browser font size. Neither framework name identifies a physical device class.
| Framework | Common ranges | Notes |
|---|---|---|
| Tailwind CSS v4 | sm 40rem (640px), md 48rem (768px), lg 64rem (1024px), xl 80rem (1280px), 2xl 96rem (1536px) | Inclusive minimum-width variants; unprefixed utilities apply below sm and above. |
| Bootstrap 5.3 | xs <576px; sm ≥576px, md ≥768px, lg ≥992px, xl ≥1200px, xxl ≥1400px | The xs tier has no class infix. Container widths are separate from breakpoint thresholds. |
Check the 1000px boundary case
At a 1000 CSS-pixel viewport with a 16px initial font size, Tailwind md is active but lg is not; Bootstrap lg is active. Resize to 991, 992, 1023, and 1024 CSS pixels and compare the results. Paste this in your own page’s developer console:
console.table({
viewport: window.innerWidth,
tailwindV4Lg: matchMedia('(min-width: 64rem)').matches,
bootstrap53Lg: matchMedia('(min-width: 992px)').matches
});Changing html { font-size: 20px } affects ordinary rem lengths, but not the initial-font-size basis of a rem media query. A browser default font preference can affect that basis. Use your compiled CSS and matchMedia results when a theme overrides the defaults.
Sources: Tailwind v4 responsive design; Bootstrap 5.3 breakpoints; W3C media-query units.