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) |