📖 What is Responsive Breakpoints?
Breakpoint Tester shows common CSS media query breakpoints for responsive design. See the standard breakpoints used by Bootstrap, Tailwind CSS and custom frameworks, and test how your content looks at different screen widths. Use it as a reference when writing media queries or configuring responsive layouts. Everything runs in your browser.
💡 Example
Input
Screen width: 768px
Output
Matches: Tablet (md)
Bootstrap: ≥768px
Tailwind: md (768px)
Media query: @media (min-width: 768px) { }
🛠️ Common Use Cases
- Looking up standard breakpoints for Bootstrap, Tailwind and Material UI
- Writing responsive media queries for custom layouts
- Testing content at common device widths
- Debugging responsive layout issues
- Planning responsive design strategies
📝 Common Breakpoints
- Mobile: 320-480px (xs/sm)
- Tablet: 768px (md)
- Laptop: 1024px (lg)
- Desktop: 1280px (xl)
- Large desktop: 1536px (2xl)
These match Tailwind CSS defaults. Bootstrap uses similar values with slight differences.
⚠️ Common Mistakes
- Designing desktop-first — mobile-first (min-width) is the recommended approach. Start with mobile styles and add complexity at larger breakpoints.
- Too many breakpoints — most designs need 3-4 breakpoints, not one for every device
- Fixed widths instead of fluid — use percentages, fr units and max-width instead of fixed pixel widths
❓ Frequently Asked Questions
Should I use min-width or max-width? ▾
min-width is recommended (mobile-first approach). Write base styles for mobile, then add @media (min-width: 768px) for larger screens.
What breakpoints does Tailwind CSS use? ▾
sm: 640px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px.
How many breakpoints do I need? ▾
Most designs work well with 3-4 breakpoints: mobile (default), tablet (~768px), desktop (~1024px) and optionally large desktop (~1280px).
Is my data private? ▾
Yes — all processing runs entirely in your browser. Your data is never sent to any server.
Is this tool free? ▾
Completely free — no login, no usage limits, works offline once loaded.
Yes — completely free, no login required, no usage limits.
Is my data private? ▾
Yes — all processing runs in your browser. Your data is never sent to any server.
Does it work offline? ▾
Yes — once the page is loaded, the tool works without an internet connection.