Category: Developer tools
Responsive Breakpoint Cheatsheet
Compare breakpoints across frameworks, or build your own
Compare the default min-width breakpoints used by Tailwind, Bootstrap, Bulma and Material Design, copy ready-made media queries for any of them, or enter your own breakpoint names and widths to generate custom ones.
| Name | Min-width |
|---|---|
| sm | 640px |
| md | 768px |
| lg | 1024px |
| xl | 1280px |
| 2xl | 1536px |
@media (min-width: 640px) {
/* sm */
}
@media (min-width: 768px) {
/* md */
}
@media (min-width: 1024px) {
/* lg */
}
@media (min-width: 1280px) {
/* xl */
}
@media (min-width: 1536px) {
/* 2xl */
}Enter a name and a pixel width per line, e.g. "md, 768".
| Name | Min-width |
|---|---|
| sm | 480px |
| md | 768px |
| lg | 1100px |
| xl | 1440px |
@media (min-width: 480px) {
/* sm */
}
@media (min-width: 768px) {
/* md */
}
@media (min-width: 1100px) {
/* lg */
}
@media (min-width: 1440px) {
/* xl */
}Everything on this page is processed in your browser. Nothing is uploaded.
What this tool does
Every CSS framework picks its own breakpoint names and pixel widths, which makes it easy to misremember which one applies where when you switch between projects. This tool lists the defaults for four common frameworks side by side and turns any of them — or a custom list you type in — into ready-to-paste @media (min-width: …) blocks.
How to use it
- Pick a framework to see its default breakpoints and media queries.
- Copy the generated CSS for the breakpoints you need.
- Or list your own breakpoint names and widths to build custom queries.
Privacy
This tool runs entirely in your browser. Your input is never uploaded, stored or shared — closing the tab removes it.
Frequently asked questions
- Why min-width and not max-width?
- A min-width, mobile-first approach means the base styles target the smallest screen and each breakpoint adds styles for larger ones, which avoids overriding rules back and forth as the framework's own breakpoints do.
- Do these match the exact framework defaults?
- Yes, these are each framework's documented default breakpoints. If your project has a custom Tailwind or Bootstrap config, use the custom breakpoint builder with your project's own values instead.
- How do I format the custom breakpoint list?
- One breakpoint per line, as a name and a pixel width separated by a comma or space, for example "md, 768".