Bootstrap 5 Breakpoints: Sizes, Classes, and Media Queries

Bootstrap’s breakpoints are the screen widths where a responsive layout changes. Bootstrap 5 has six of them: xs below 576px, then sm at 576px, md at 768px, lg at 992px, xl at 1200px, and xxl at 1400px. Every responsive class, from col-md-6 to d-lg-none, uses these names, and they all work the same way: a class with a breakpoint applies from that width up. This guide lists the exact values, shows how to use them in classes, Sass, and plain CSS, and explains how to change them, including what is different in Bootstrap 6.

The Bootstrap 5 breakpoints

Breakpoint	Class infix	Applies from	Container max width	Typical devices
Extra small	none	0	100%	Phones in portrait
Small	sm	576px	540px	Large phones, phones in landscape
Medium	md	768px	720px	Tablets
Large	lg	992px	960px	Laptops, tablets in landscape
Extra large	xl	1200px	1140px	Desktops
Extra extra large	xxl	1400px	1320px	Large desktops

These are the values in Bootstrap 5.3.9, the current stable release. The device column is only a rough guide: breakpoints follow the width of the browser window, not the type of device, so a desktop browser narrowed to 700px gets the same layout as a phone.

Mobile first: what “from that width up” means

Bootstrap is mobile first. A class without a breakpoint applies at every width, and a class with a breakpoint switches on at that width and stays on above it. Nothing switches off on its own, so you read responsive classes from small to large:

<div class="col-12 col-md-6 col-xl-4">...</div>

This column is full width on phones, half width from 768px (md), and a third from 1200px (xl). There is no xs infix, because extra small is simply the default: col-12 is the phone layout.

The practical habit that follows is to design the phone layout first with unprefixed classes, then add breakpoint classes only where the layout should change on bigger screens.

Using breakpoints in classes

Almost every layout utility has responsive versions, written as {property}-{breakpoint}-{value}:

<!-- Grid: 1 column, 2 from md, 3 from lg -->
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">...</div>

<!-- Hide on phones, show from md -->
<div class="d-none d-md-block">Sidebar</div>

<!-- Show only on phones -->
<div class="d-md-none">Mobile menu hint</div>

<!-- Stack on phones, side by side from lg -->
<div class="d-flex flex-column flex-lg-row gap-3">...</div>

<!-- Center text on phones, left-align from md -->
<p class="text-center text-md-start">...</p>

The same pattern covers spacing (mt-md-5), flexbox (justify-content-lg-between), ordering (order-lg-first), floats (float-md-end), and sticky positioning (sticky-md-top). See the guides to the grid system, flexbox utilities, and spacing for each one in depth.

Showing and hiding by breakpoint

To show something only within a range, combine a hiding class with a showing class:

Visible on	Classes
Phones only (below 768px)	d-md-none
Tablets and up (768px and up)	d-none d-md-block
Tablets only (768px to 991px)	d-none d-md-block d-lg-none
Desktops only (992px and up)	d-none d-lg-block

Use d-md-flex or d-md-inline instead of d-md-block when the element needs that display type. Hidden elements are still in the HTML, so keep important content visible at every width rather than duplicating it.

Components with breakpoints

Several components take a breakpoint too:

• Navbar: navbar-expand-lg shows the full menu from 992px and collapses it behind the toggler below. The navbar guide covers every expand option.
• Containers: container-md is full width below 768px and then fixed width, where container is fixed width from 576px.
• Tables: table-responsive-md scrolls a table sideways below 768px.
• List groups: list-group-horizontal-md lays items out in a row from 768px.
• Modals: modal-fullscreen-md-down makes a modal fill the screen below 768px.
• Offcanvas: offcanvas-lg turns an offcanvas panel into normal page content from 992px.

Breakpoints in your own CSS

When you write custom CSS, use the same widths so your styles change in step with Bootstrap’s classes:

/* md and up */
@media (min-width: 768px) {
  .hero { padding-block: 6rem; }
}

/* below lg */
@media (max-width: 991.98px) {
  .sidebar { position: static; }
}

The .98 on max widths is deliberate. Bootstrap subtracts 0.02px from the next breakpoint so a max-width query never overlaps the min-width query at the same width, even on high-density screens with fractional widths.

Bootstrap 5.3 also exposes the breakpoints as CSS custom properties, such as --bs-breakpoint-md: 768px. They are handy in JavaScript, but you can’t use them inside a media query, because CSS doesn’t allow custom properties there. Use the pixel values or Sass instead.

Breakpoints in Sass

If you compile Bootstrap from Sass, use its mixins instead of typing widths:

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";

.hero {
  padding-block: 3rem;

  @include media-breakpoint-up(md) {
    padding-block: 6rem;            // 768px and up
  }
}

.sidebar {
  @include media-breakpoint-down(lg) {
    position: static;               // below 992px
  }
}

.promo {
  @include media-breakpoint-between(md, xl) {
    display: none;                  // 768px to 1199.98px
  }
}

.banner {
  @include media-breakpoint-only(md) {
    font-size: 1.25rem;             // 768px to 991.98px only
  }
}

In Bootstrap 5, media-breakpoint-down(lg) means “below lg”, so it compiles to max-width: 991.98px. That changed from Bootstrap 4, where down(md) included md itself, and it is the most common surprise when upgrading.

Changing the breakpoints

The breakpoints live in two Sass maps, $grid-breakpoints and $container-max-widths. Override them before importing Bootstrap and every responsive class is regenerated with your values:

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 1024px,
  xl: 1280px,
  xxl: 1536px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 980px,
  xl: 1220px,
  xxl: 1480px
);

@import "bootstrap/scss/bootstrap";

Keep the values in ascending order and start at xs: 0. Bootstrap checks both when it compiles and prints a warning if they are wrong, and the responsive classes then cascade in the wrong order. You can also add or remove a breakpoint, but every one you add creates a full set of responsive utilities, which makes the CSS bigger; see reducing Bootstrap’s CSS size. The Bootstrap Sass variables guide explains overriding variables in general, and the theme builder lets you change the grid visually and export the compiled CSS.

Breakpoints in Bootstrap 6

Bootstrap 6 is in alpha (6.0.0-alpha.1, released in October 2026) and changes the breakpoints. In the alpha, the Sass map is called $breakpoints and the values are:

Breakpoint	Bootstrap 5.3	Bootstrap 6 alpha
sm	576px	576px
md	768px	768px
lg	992px	1024px
xl	1200px	1280px
xxl / 2xl	1400px (xxl)	1536px (2xl)

So the top breakpoint is renamed from xxl to 2xl, and lg and up move to wider screens. An alpha can still change before the stable release, so stay on Bootstrap 5.3 for production sites, and expect to review lg, xl, and xxl classes when you upgrade.

Common breakpoint problems

A breakpoint class does nothing. Check the order: a class like d-md-none hides the element from 768px up, so it will look unchanged in a narrow window. Also check that the page has a viewport meta tag, or phones render it at desktop width:

<meta name="viewport" content="width=device-width, initial-scale=1">

Two classes fight each other. Responsive classes of the same property apply from small to large, so col-lg-4 col-md-6 and col-md-6 col-lg-4 behave the same. If a layout still looks wrong, look for a custom CSS rule with higher specificity overriding the utility.

The layout breaks between two breakpoints. Content such as long words, wide images, or fixed widths can overflow a column at in-between widths. Give images img-fluid, avoid fixed pixel widths, and test by dragging the browser window slowly through each range.

FAQ

What are the Bootstrap 5 breakpoints?

Bootstrap 5 has six breakpoints: extra small below 576px (no infix), sm from 576px, md from 768px, lg from 992px, xl from 1200px, and xxl from 1400px. A class with a breakpoint, such as col-md-6, applies from that width up.

What is the md breakpoint in Bootstrap?

The md breakpoint in Bootstrap 5 is 768px. Classes with md, such as col-md-6 or d-md-block, apply at 768px and wider, which usually covers tablets and larger screens.

What is the lg breakpoint in Bootstrap?

The lg breakpoint in Bootstrap 5 is 992px. In the Bootstrap 6 alpha it moves to 1024px.

How do I hide an element on mobile in Bootstrap?

Add d-none d-md-block to hide an element below 768px and show it from tablets up. To show something only on mobile, use d-md-none, which hides it from 768px up.

How do I change the Bootstrap breakpoints?

Override the $grid-breakpoints and $container-max-widths Sass maps before importing Bootstrap, keeping the values in ascending order and starting at xs: 0. Bootstrap then rebuilds every responsive class with your widths.

Why does media-breakpoint-down(md) not include md?

In Bootstrap 5, media-breakpoint-down(md) means “below the md breakpoint”, so it applies up to 767.98px. Bootstrap 4 included the named breakpoint itself, so code moved from Bootstrap 4 needs the next breakpoint up to keep the same behavior.

What breakpoints does Bootstrap 6 use?

In the Bootstrap 6 alpha (6.0.0-alpha.1), the breakpoints are sm 576px, md 768px, lg 1024px, xl 1280px, and 2xl 1536px. The top breakpoint is renamed from xxl to 2xl. The values may still change before the stable release.