Breakpoints in Bootstrap
From the Bootstrap 5 cheat sheet · Responsive Utilities · verified Jul 2026
Breakpoints
Responsive breakpoint system
html
<!-- Breakpoint Classes -->
<!--
xs: <576px (default, no suffix)
sm: ≥576px
md: ≥768px
lg: ≥992px
xl: ≥1200px
xxl: ≥1400px
-->
<!-- Responsive Columns -->
<div class="col-12 col-sm-6 col-md-4 col-lg-3">
Responsive column
</div>
<!-- Responsive Display -->
<div class="d-none d-md-block">
Hidden on mobile, visible on desktop
</div>💡 Mobile-first approach: styles apply to xs and up by default
⚡ Use responsive utility variants for all screen sizes
📌 Combine multiple responsive classes for complex layouts
🔥 Test on actual devices, not just browser resize