Bootstrap Responsive Breakpoints Reference

Bootstrap 5 Breakpoints

Bootstrap uses a mobile-first breakpoint system similar to Tailwind but with different threshold values.

Default Breakpoints

Prefix	Min Width	Container Max-Width
(none)	0px	100% (fluid)
sm	576px	540px
md	768px	720px
lg	992px	960px
xl	1200px	1140px
xxl	1400px	1320px

Comparison with Tailwind CSS

Breakpoint	Bootstrap	Tailwind
Small	576px	640px
Medium	768px	768px
Large	992px	1024px
Extra Large	1200px	1280px
2X Large	1400px	1536px

Bootstrap breakpoints are generally lower than Tailwind's, meaning Bootstrap hits the next tier sooner at narrower viewports.

Grid System Usage

<div class="container">
  <div class="row">
    <div class="col-12 col-md-6 col-lg-4">
      <!-- Full width on mobile, half on md, third on lg -->
    </div>
  </div>
</div>

Sass Mixins

@include media-breakpoint-up(md) {
  // Styles for md and above (min-width: 768px)
}

@include media-breakpoint-down(lg) {
  // Styles below lg (max-width: 991.98px)
}

@include media-breakpoint-between(sm, lg) {
  // Between 576px and 991.98px
}

Customizing in Sass

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

Which to Choose?

• Bootstrap: Better for content-heavy sites, includes container max-widths
• Tailwind: Utility-first, slightly wider breakpoints matching modern device landscape