Bootstrap 5 Responsive Breakpoints — Complete Guide

Breakpoints are the foundation of responsive design in Bootstrap. Once you understand how they work — and the mobile-first logic behind them — everything else clicks.

The 6 Bootstrap 5 Breakpoints

These match Bootstrap's Sass variables, which you can override:

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

Mobile-First: What It Actually Means

Bootstrap is mobile-first. This is the most important thing to understand about the breakpoint system.

When you write col-md-6, you're saying: from md (768px) and up, this column is 6 units wide. Below md, it defaults to full width (12 units).

The logic flows upward:

<div class="col-12 col-sm-6 col-lg-4">

This reads: full width on xs → half width from sm → one-third from lg. You start with the smallest screen and override as screens get larger.

This is the opposite of "desktop-first" thinking where you start wide and add overrides for mobile. Bootstrap's approach means your mobile styles are the base, and larger screens get progressive enhancements.

Grid Breakpoints in Practice

<!-- One column on mobile, two on tablet, four on desktop -->
<div class="row g-3">
  <div class="col-12 col-sm-6 col-xl-3">Card 1</div>
  <div class="col-12 col-sm-6 col-xl-3">Card 2</div>
  <div class="col-12 col-sm-6 col-xl-3">Card 3</div>
  <div class="col-12 col-sm-6 col-xl-3">Card 4</div>
</div>

<!-- Two thirds / one third layout from md up, stacked on mobile -->
<div class="row g-3">
  <div class="col-12 col-md-8">Main content</div>
  <div class="col-12 col-md-4">Sidebar</div>
</div>

<!-- row-cols shorthand: 1 column mobile, 2 tablet, 3 desktop -->
<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 g-3">
  <div class="col">Item</div>
  <div class="col">Item</div>
  <div class="col">Item</div>
</div>

Display Breakpoints

The d-{breakpoint}-{value} pattern controls visibility:

<!-- Show only on mobile -->
<div class="d-block d-md-none">Mobile only content</div>

<!-- Hide on mobile, show from md up -->
<div class="d-none d-md-block">Desktop sidebar</div>

<!-- Show only on lg -->
<div class="d-none d-lg-block d-xl-none">Laptop only</div>

<!-- Hamburger on mobile, nav links on desktop -->
<button class="navbar-toggler d-lg-none">...</button>
<div class="d-none d-lg-flex gap-3">
  <a href="#">Home</a>
  <a href="#">About</a>
</div>

Flex Breakpoints

Flexbox utilities also accept breakpoints:

<!-- Stack on mobile, row from md up -->
<div class="d-flex flex-column flex-md-row gap-3">
  <div>Left</div>
  <div>Right</div>
</div>

<!-- Center on mobile, space-between on lg -->
<div class="d-flex justify-content-center justify-content-lg-between">
  ...
</div>

<!-- Wrap on small, no-wrap from xl -->
<div class="d-flex flex-wrap flex-xl-nowrap">
  ...
</div>

Text and Spacing Breakpoints

<!-- Text alignment by breakpoint -->
<p class="text-center text-md-start">Left-aligned on tablet+, centered on mobile</p>

<!-- Responsive padding -->
<div class="p-2 p-md-4 p-xl-5">...</div>

<!-- Responsive margin -->
<div class="mb-3 mb-md-0">...</div>

Navbar Breakpoint

The navbar collapse breakpoint is one of the most common uses:

<!-- Collapses at lg (992px) -->
<nav class="navbar navbar-expand-lg">...</nav>

<!-- Collapses at md (768px) — useful for narrower layouts -->
<nav class="navbar navbar-expand-md">...</nav>

<!-- Never collapses -->
<nav class="navbar navbar-expand">...</nav>

<!-- Always collapsed (always shows hamburger) -->
<nav class="navbar">...</nav>

Container Breakpoints

Bootstrap's container widths change at each breakpoint:

Use container-fluid for 100% width at all breakpoints. Use container-{breakpoint} to be fluid below the breakpoint and fixed above:

<!-- Fluid on mobile, fixed-width from md up -->
<div class="container-md">...</div>

Custom Media Queries to Match Bootstrap

When writing custom CSS alongside Bootstrap, use these exact values to stay in sync:

/* Small (sm) and up */
@media (min-width: 576px) { }

/* Medium (md) and up */
@media (min-width: 768px) { }

/* Large (lg) and up */
@media (min-width: 992px) { }

/* Extra large (xl) and up */
@media (min-width: 1200px) { }

/* XXL and up */
@media (min-width: 1400px) { }

Testing Breakpoints in Chrome DevTools

The fastest way to test responsive layouts:

1. Open DevTools (F12 or Cmd+Option+I)
2. Click the device toggle icon (or Ctrl+Shift+M)
3. Resize the viewport or select presets
4. Watch Bootstrap's grid and utility classes respond

Add a temporary visual indicator while building:

<!-- Shows current breakpoint — remove before going live -->
<div class="position-fixed bottom-0 start-0 p-2 bg-dark text-white small" style="z-index:9999;">
  <span class="d-inline d-sm-none">XS</span>
  <span class="d-none d-sm-inline d-md-none">SM</span>
  <span class="d-none d-md-inline d-lg-none">MD</span>
  <span class="d-none d-lg-inline d-xl-none">LG</span>
  <span class="d-none d-xl-inline d-xxl-none">XL</span>
  <span class="d-none d-xxl-inline">XXL</span>
</div>

Drop this in the body during development — it shows the active breakpoint in the corner as you resize. Remove it before deploying.