Responsive Breakpoints
Bootstrap 5
| Name | Width | Media Query |
|---|---|---|
| xs | < 576px | /* default — no media query */ |
| sm | ≥ 576px | @media (min-width: 576px) |
| md | ≥ 768px | @media (min-width: 768px) |
| lg | ≥ 992px | @media (min-width: 992px) |
| xl | ≥ 1200px | @media (min-width: 1200px) |
| xxl | ≥ 1400px | @media (min-width: 1400px) |
Tailwind CSS
| Name | Width | Media Query |
|---|---|---|
| sm | ≥ 640px | @media (min-width: 640px) |
| md | ≥ 768px | @media (min-width: 768px) |
| lg | ≥ 1024px | @media (min-width: 1024px) |
| xl | ≥ 1280px | @media (min-width: 1280px) |
| 2xl | ≥ 1536px | @media (min-width: 1536px) |
Material UI (MUI)
| Name | Width | Media Query |
|---|---|---|
| xs | 0 – 599px | @media (max-width: 599.95px) |
| sm | 600 – 899px | @media (min-width: 600px) |
| md | 900 – 1199px | @media (min-width: 900px) |
| lg | 1200 – 1535px | @media (min-width: 1200px) |
| xl | ≥ 1536px | @media (min-width: 1536px) |