Bootstrap 5.3 · mobile-first · px
576 · 768 · 992 · 1200 · 1400
5 breakpoints from 576px to 1400px. The extra-small tier has no class infix and no media query — it is the default. Container max-widths step up at each breakpoint.
| Name | Value | Pixels | Media query | Container | Devices ≥ |
|---|---|---|---|---|---|
xs | 0 | — | (no media query — default) | — | 242 |
sm | 576px | 576 | @media (min-width: 576px) | 540px | 99 |
md | 768px | 768 | @media (min-width: 768px) | 720px | 95 |
lg | 992px | 992 | @media (min-width: 992px) | 960px | 63 |
xl | 1200px | 1200 | @media (min-width: 1200px) | 1140px | 53 |
xxl | 1400px | 1400 | @media (min-width: 1400px) | 1320px | 39 |
Configuration
// _variables.scss
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
);How Bootstrap compares
| Framework | Unit | 480 | 576 | 600 | 640 | 768 | 992 | 1024 | 1200 | 1280 | 1440 | 1536 | 1600 | 1920 | Only here |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Tailwind CSS | rem | · | · | · | sm | md | · | lg | · | xl | · | 2xl | · | · | — |
| Bootstrap | px | · | sm | · | · | md | lg | · | xl | · | · | · | · | · | 1400 xxl |
| MUI (Material UI) | px | · | · | sm | · | · | · | · | lg | · | · | xl | · | · | 900 md |
| Bulma | px | · | · | · | · | · | · | desktop | · | · | · | · | · | · | 769 tablet, 1216 widescreen, 1408 fullhd |
| Foundation | em | · | · | · | medium | · | · | large | xlarge | · | xxlarge | · | · | · | — |
| Chakra UI | em | sm | · | · | · | md | lg | · | · | xl | · | 2xl | · | · | — |
| Ant Design | px | · | sm | · | · | md | lg | · | xl | · | · | · | xxl | · | — |
| Vuetify | px | · | · | sm | · | · | · | · | · | lg | · | · | · | xl | 960 md, 2560 xxl |
| Material Design 3 | dp | · | · | Medium | · | · | · | · | Large | · | · | · | Extra-large | · | 840 Expanded |
| Open Props | em | --sm | · | · | · | --md | · | --lg | · | · | --xl | · | · | --xxl | 240 --xxs, 384 --xs |
Questions
What are the default Bootstrap breakpoints?
Bootstrap 5.3 ships 6 tiers: xs (0px), sm (576px), md (768px), lg (992px), xl (1200px), xxl (1400px).
Are Bootstrap breakpoints min-width or max-width?
Bootstrap is mobile-first, so every breakpoint is a min-width query. Styles apply from that width upward.
How do I change the Bootstrap breakpoints?
Override them in the configuration — see the snippet on this page. Changing them is usually a mistake unless you have a concrete layout reason; the defaults are chosen to sit between real device clusters.
Why does Bootstrap use px?
Pixel breakpoints are predictable and map directly to device widths, which makes them easy to reason about — at the cost of ignoring the user's font-size preference.
Other frameworks
Tailwind CSS5 tiersMUI (Material UI)4 tiersBulma4 tiersFoundation4 tiersChakra UI5 tiersAnt Design5 tiersVuetify5 tiersMaterial Design 34 tiersOpen Props7 tiers
Values taken from the official Bootstrap documentation (https://getbootstrap.com/docs/5.3/layout/breakpoints/), version 5.3, verified 2026-08-07.