Bootstrap Breakpoints

Check the active Bootstrap breakpoint live and reference xs, sm, md, lg, xl and xxl media query widths.

xs base sm 576px md 768px lg 992px xl 1200px xxl 1400px

Live Bootstrap breakpoint

…pxviewport width

Selected system

Bootstrap

Extra small range

Next breakpoint

sm in 576px

576px min-width

Copy-ready output

base styles (no min-width query)

xxl

Critical widths to test

Exact widths around the selected Bootstrap threshold.

Default Bootstrap breakpoint table

Breakpoint	Min width	Range	Media query	Example
xs Extra small	0px	0px-575px	base styles	.col-12
sm Small	576px	576px-767px	@media (min-width: 576px)	.col-sm-6
md Medium	768px	768px-991px	@media (min-width: 768px)	.col-md-6
lg Large	992px	992px-1199px	@media (min-width: 992px)	.col-lg-6
xl Extra large	1200px	1200px-1399px	@media (min-width: 1200px)	.col-xl-6
xxl Extra extra large	1400px	1400px+	@media (min-width: 1400px)	.col-xxl-6

Grid class example

<div class="row">
  <div class="col-12 col-md-6 col-lg-4">...</div>
</div>

CSS equivalent

@media (min-width: 768px) {
  .layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

Insight

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 be 992px while the centered container is narrower. Test both the breakpoint behavior and the content width inside the container when debugging grid layouts.

Check viewport Open CSS media queries

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.

Bootstrap Breakpoints

Critical widths to test

Default Bootstrap breakpoint table

Breakpoints vs. containers

Bootstrap breakpoint testing set

Frequently asked questions

Related tools

Copy manually