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
Tailwind and Bootstrap both use named ranges, but the exact values and labels are different. A layout can be in a large range for one framework and a different named range for another, depending on the configured breakpoints.
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
Most production projects eventually use custom breakpoints or design-token ranges. Test the exact values from your project and record the active range when reporting responsive bugs.
Breakpoint reference
Framework names are helpful, but always confirm the active viewport width in your browser.
| Framework | Common ranges | Notes |
|---|---|---|
| Tailwind | sm 640, md 768, lg 1024, xl 1280, 2xl 1536 | Mobile-first min-width classes. |
| Bootstrap | sm 576, md 768, lg 992, xl 1200, xxl 1400 | Container and grid behavior can differ. |