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

Current

0px-575px

Next breakpoint

sm in 576px

576px min-width

Media query

base styles (no min-width query)

xxl

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

› 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.