Bootstrap 5 Breakpoints: Responsive Design Explained

Q: Can I change Bootstrap 5 breakpoint values?

Yes, if you compile from Sass. Override the $grid-breakpoints map before importing Bootstrap. With a precompiled bundle such as the one inside Canvas, the utility classes keep the default values, so write custom media queries for any different thresholds.

Q: What is the difference between media-breakpoint-up and media-breakpoint-down?

The up mixin generates a min-width query starting at the named breakpoint. The down mixin generates a max-width query that ends just before the next breakpoint, so down(md) targets screens narrower than 768px.

Most responsive bugs in Bootstrap projects come from misunderstanding one thing: Bootstrap 5 breakpoints are mobile-first, so every class applies upward unless something overrides it. Get that mental model right and responsive layouts become predictable.

Key Takeaways

Bootstrap 5 has six breakpoints (xs, sm, md, lg, xl, xxl) and all of them use min-width media queries, so a class like col-md-6 applies at 768px and above.
Design for the smallest screen first, then add breakpoint infixes only where the layout needs to change.
Use Sass mixins or plain @media queries for custom CSS, and keep your values aligned with Bootstrap’s own breakpoints.
Inside Canvas HTML Template, the same breakpoints apply, so your custom overrides should follow them.

The Six Bootstrap 5 Breakpoints and Their Values

Bootstrap 5 (including 5.3) defines six tiers. Each one is a minimum viewport width, and the layout rules for a tier stay active on every wider screen too.

Breakpoint	Class infix	Min width	Typical device
Extra small	(none)	0	Phones in portrait
Small	sm	576px	Large phones, landscape
Medium	md	768px	Tablets
Large	lg	992px	Small laptops
Extra large	xl	1200px	Desktops
Extra extra large	xxl	1400px	Large monitors

There is no -xs infix. Classes without an infix, such as col-6 or d-none, target every screen from 0 upward. If you want to check how column splits behave at each tier, the Bootstrap Grid Calculator is a quick way to test combinations.

How Mobile-First Grid Classes Actually Work

Because breakpoints are min-width based, stacking columns on mobile and splitting them on larger screens needs very little markup. Start with a full-width default, then add a class at the first breakpoint where the layout should change.

HTML

<div class="container">
  <div class="row g-4">
    <div class="col-12 col-md-6 col-xl-4">Card one</div>
    <div class="col-12 col-md-6 col-xl-4">Card two</div>
    <div class="col-12 col-md-12 col-xl-4">Card three</div>
  </div>
</div>

The cards stack below 768px, sit in two columns from 768px, and form three columns from 1200px. The most common mistake is writing col-md-6 col-12 and expecting col-12 to “win” on desktop. It will not: col-md-6 takes over at 768px and stays active upward.

Containers follow the same logic. .container snaps to fixed max-widths at each breakpoint (540, 720, 960, 1140 and 1320px), while .container-fluid always spans 100%. Responsive containers like .container-lg stay fluid until that breakpoint is reached, then become fixed.

Responsive Utilities Beyond the Grid

Breakpoint infixes work on far more than columns. Display, spacing, flex direction, text alignment, and sizing utilities all accept them, using the pattern {property}-{breakpoint}-{value}.

HTML

<nav class="d-none d-lg-flex gap-4">Desktop navigation</nav>
<button class="d-lg-none btn btn-dark">Menu</button>

<div class="d-flex flex-column flex-md-row align-items-md-center py-4 py-lg-5">
  <h2 class="text-center text-md-start mb-3 mb-md-0">Headline</h2>
  <a href="#" class="btn btn-primary ms-md-auto">Get started</a>
</div>

This block shows the menu button below 992px, hides it above, stacks the heading and button on phones, and aligns them in a row from 768px. Typography scales the same way. For font-size and weight utilities that pair well with these breakpoints, see our guide to Bootstrap 5 typography.

Writing Custom Media Queries That Match Bootstrap

When utilities are not enough, write your own CSS using the same thresholds. Sticking to Bootstrap’s values means your overrides switch at exactly the same moment as the grid.

CSS

/* Mobile-first base */
.hero-title { font-size: 2rem; }

/* 768px and up */
@media (min-width: 768px) {
  .hero-title { font-size: 3rem; }
}

/* 1200px and up */
@media (min-width: 1200px) {
  .hero-title { font-size: 4rem; }
}

/* Max-width queries: subtract 0.02px to avoid overlap */
@media (max-width: 767.98px) {
  .hero-actions { flex-direction: column; }
}

The 767.98px value is how Bootstrap itself writes max-width queries. It avoids a one-pixel overlap with the 768px min-width query on fractional-pixel displays. If you convert breakpoints to relative units, the px to rem converter helps (768px equals 48em in media queries, assuming a 16px base).

If you compile Bootstrap from Sass, use the built-in mixins instead of hardcoding numbers:

CSS

@include media-breakpoint-up(md) { .sidebar { display: block; } }
@include media-breakpoint-down(lg) { .sidebar { display: none; } }
@include media-breakpoint-between(md, xl) { .promo { padding: 2rem; } }
@include media-breakpoint-only(md) { .promo { text-align: center; } }

One trap worth knowing: media-breakpoint-down(lg) targets everything below xl (under 1200px). Bootstrap’s “down” mixin uses the next breakpoint as its upper bound, which catches many developers off guard.

Working With Breakpoints in Canvas

Canvas is built on Bootstrap 5 and bundles it, so everything above works without loading Bootstrap from a CDN. Place your own overrides after style.css and use the same breakpoints. Canvas exposes theme settings as CSS variables such as --cnvs-themecolor, --cnvs-primary-font, and --cnvs-logo-height, which you can adjust per breakpoint rather than writing selector overrides.

CSS

:root {
  --cnvs-logo-height: 40px;
}

@media (min-width: 992px) {
  :root {
    --cnvs-logo-height: 60px;
  }
}

This keeps logo sizing within Canvas’s own system, instead of targeting #logo img directly. A tool like Canvas Builder generates layouts that already use the right grid classes for each section, which saves you from hand-tuning every col-md-* and col-xl-* combination. For a wider view of page structure, our guide to building landing pages with HTML templates covers how sections fit together.

Common Breakpoint Mistakes and When Bootstrap Falls Short

Designing desktop first. Writing col-lg-4 and forgetting a mobile default leaves phones with an unplanned stack. Always decide the xs layout first.
Using too many breakpoints. Most sections need only two or three changes (base, md, and lg or xl). More infixes mean more to maintain.
Testing only in device mode. Resize the browser slowly and watch the awkward zones around 768px to 991px, where tablets in portrait and landscape often break.
Hiding content instead of restructuring it. Overusing d-none d-md-block duplicates markup and can hurt accessibility and SEO.

There are real limits here too. Bootstrap’s breakpoints are viewport based, so a component cannot adapt to its container’s width. For that you need CSS container queries, which are supported in modern browsers but are not part of Bootstrap’s utility system. If component-level responsiveness is central to your project, weigh that against what a utility-first framework offers, as covered in Bootstrap 5 vs Tailwind CSS in 2026.

Frequently Asked Questions

What are the default Bootstrap 5 breakpoints?

They are 0 (xs), 576px (sm), 768px (md), 992px (lg), 1200px (xl), and 1400px (xxl). Each is a minimum width, and styles apply to that width and everything larger.

Is there a breakpoint class for extra small screens?

No. Extra small is the default, so classes with no infix, such as col-6 or d-block, apply from 0px upward. You only add an infix when you want to change behaviour at a larger size.

Can I change Bootstrap 5 breakpoint values?

Yes, if you compile from Sass. Override the $grid-breakpoints map before importing Bootstrap. With a precompiled bundle such as the one inside Canvas, the utility classes keep the default values, so write custom media queries for any different thresholds.

What is the difference between media-breakpoint-up and media-breakpoint-down?

The up mixin generates a min-width query starting at the named breakpoint. The down mixin generates a max-width query that ends just before the next breakpoint, so down(md) targets screens narrower than 768px.

Do I need to add Bootstrap separately when using Canvas?

No. Canvas bundles Bootstrap 5, so its breakpoints and utilities are available through style.css and the included JavaScript files. Loading Bootstrap again from a CDN can cause conflicts.

If you’re working with the Canvas HTML Template and want to generate production-ready layouts faster, try Canvas Builder free and see how much time you save on every project.