Bootstrap Breakpoints
Check the active Bootstrap breakpoint live and reference xs, sm, md, lg, xl and xxl media query widths.
Critical widths to test
Exact widths around the selected Bootstrap threshold.
Default Bootstrap breakpoint table
| Breakpoint | Min width | Range | Media query | Example |
|---|---|---|---|---|
| xsExtra small | 0px | 0px-575px | base styles | .col-12 |
| smSmall | 576px | 576px-767px | @media (min-width: 576px) | .col-sm-6 |
| mdMedium | 768px | 768px-991px | @media (min-width: 768px) | .col-md-6 |
| lgLarge | 992px | 992px-1199px | @media (min-width: 992px) | .col-lg-6 |
| xlExtra large | 1200px | 1200px-1399px | @media (min-width: 1200px) | .col-xl-6 |
| xxlExtra extra large | 1400px | 1400px+ | @media (min-width: 1400px) | .col-xxl-6 |
<div class="row">
<div class="col-12 col-md-6 col-lg-4">...</div>
</div>@media (min-width: 768px) {
.layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}Breakpoints vs. containers
Bootstrap breakpoints are viewport thresholds. Container widths are layout max-widths that change at those thresholds, but they are not the same number as the viewport. A viewport can be992pxwhile the centered container is narrower. Test both the breakpoint behavior and the content width inside the container when debugging grid layouts.
Bootstrap breakpoint testing set
Check the pixel below and the first pixel of every tier. This catches off-by-one grid, container and navbar issues before release.
| Width | Target | Why test it |
|---|---|---|
| 575px | Below sm | Last pixel in the xs base range. |
| 576px | sm starts | Small tier begins; .col-sm-* starts applying. |
| 767px | Below md | Last width before common tablet grid changes. |
| 768px | md starts | Medium tier begins; .col-md-* starts applying. |
| 991px | Below lg | Checks tablet and compact nav layouts before lg. |
| 992px | lg starts | Large tier begins for many desktop navs. |
| 1199px | Below xl | Last width before wide container spacing. |
| 1200px | xl starts | Extra large tier begins. |
| 1399px | Below xxl | Last width before the widest Bootstrap tier. |
| 1400px | xxl starts | Extra extra large tier begins. |
Frequently asked questions
›What is the Bootstrap md breakpoint?
Bootstrap md starts at 768px. Below 768px, layouts stay in the xs or sm ranges depending on viewport width.
›What does xs mean in Bootstrap?
xs is the base range below 576px. It does not need a min-width media query because the base styles already apply there.
›Are Bootstrap breakpoints based on device width?
No. They respond to viewport width in CSS pixels, so browser chrome, window size and zoom can all affect what range is active.
Related tools
- Responsive Breakpoint CheckerCheck the current responsive breakpoint live, compare Tailwind and Bootstrap defaults, and copy media queries for common viewport widths.
- Viewport Size CheckerSee your browser's CSS viewport size and window size live. Updates as you resize — with current responsive breakpoint for developers.
- Tailwind BreakpointsSee which Tailwind CSS breakpoint your viewport is currently using, with the default breakpoints, rem values, pixel equivalents and media query snippets.
- CSS Media Query BreakpointsReference common CSS media query widths, test your current viewport, and copy mobile-first queries for responsive layouts.