Reference
- Free forever
- No sign-up
- Instant results
Breakpoint Reference
Tailwind and Bootstrap breakpoints side by side, with copyable media query strings. Enter a viewport width to instantly see which breakpoints are active.
| Name | Tailwind | Bootstrap | Width |
|---|---|---|---|
| xs / mobile | — | < 576px | max 575px |
| sm | 640px | ≥ 576px | min 640px |
| md | 768px | ≥ 768px | min 768px |
| lg | 1024px | ≥ 992px | min 1024px |
| xl | 1280px | ≥ 1200px | min 1280px |
| 2xl | 1536px | ≥ 1400px | min 1536px |
When would you use this?
Constantly switching between docs to look up whether md is 768px in Tailwind or Bootstrap (it's the same, but xl isn't!) is a genuine time sink. This reference puts them side by side with the exact pixel values and lets you click any row to copy the media query string. There's also a quick checker where you enter your viewport width and see which breakpoints are active.