Bootstrap Media Query Breakpoints: Bootstrap 5, 4, 3 Complete Reference

Bootstrap's responsive grid uses six mobile-first breakpoints — xs (less than 576px), sm (576px+), md (768px+), lg (992px+), xl (1200px+), and xxl (1400px+, added in Bootstrap 5). Every responsive utility (.col-md-6, .d-lg-block, .text-xxl-start) and every Sass mixin (media-breakpoint-up(md), media-breakpoint-down(lg), media-breakpoint-only(sm), media-breakpoint-between(md, xl)) compiles to a @media (min-width: ...) query against one of those six values. This is the one-page reference I keep open: every breakpoint per Bootstrap version, every mixin variant with its compiled CSS, container max-widths, common gotchas, and a Tailwind side-by-side because half the time someone asks "what's the Bootstrap equivalent of md:".

What are Bootstrap media query breakpoints?

Bootstrap media query breakpoints are the pixel-width thresholds the framework uses to switch between responsive layouts. Bootstrap is mobile-first, so each breakpoint declares a min-width — styles apply at that width AND up. The six current breakpoints (Bootstrap 5.3, the current major release in 2026) are: xs for less than 576px (the implicit default, no media query), sm for 576px and up, md for 768px and up, lg for 992px and up, xl for 1200px and up, and xxl for 1400px and up. Every responsive grid class and utility class compiles to a @media (min-width: …) query keyed to one of these widths, and the Sass mixins (media-breakpoint-up, down, only, between) are the recommended way to author your own responsive rules.

Jump to:

• Bootstrap 5.3 breakpoints (current)
• Bootstrap 5 Sass mixins
• Bootstrap 5 container max-widths
• Customising Bootstrap 5 breakpoints
• Bootstrap 4 breakpoints
• Bootstrap 3 breakpoints (legacy)
• Bootstrap 2.3.2 breakpoints (very legacy)
• Bootstrap vs Tailwind breakpoints
• Common gotchas
• FAQ

Bootstrap 5.3 breakpoints (current)

The CSS-only form, exactly as Bootstrap's compiled output emits:

/* Extra small — no media query, mobile-first default */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) { ... }

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { ... }

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { ... }

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { ... }

/* Extra extra large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) { ... }

Bootstrap 5 Sass mixins

Four mixin variants, each compiling to a different media-query shape. Use these instead of hand-writing @media rules — they stay in sync if the breakpoint values are customised.

Usage examples:

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

.hero {
  padding: 2rem 1rem;

  @include media-breakpoint-up(md) {
    padding: 4rem 2rem;
  }

  @include media-breakpoint-up(xl) {
    padding: 6rem 4rem;
  }
}

.mobile-only-banner {
  @include media-breakpoint-down(md) {
    display: block;
  }
  @include media-breakpoint-up(md) {
    display: none;
  }
}

.tablet-grid {
  @include media-breakpoint-only(md) {
    grid-template-columns: repeat(2, 1fr);
  }
}

The 0.02px epsilon on down and only/between upper bounds (991.98px instead of 992px) prevents a 1px overlap where both queries would match. The amount is intentional — 1px would visibly skip on some browsers' subpixel rendering; 0.02px is the smallest value that avoids that.

Bootstrap 5 container max-widths

.container and .container-{breakpoint} cap their max-width at the values above. The fluid alternative is .container-fluid (always 100% width).

// Compiled from Bootstrap source:
.container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl {
  width: 100%;
  padding-right: var(--bs-gutter-x);
  padding-left: var(--bs-gutter-x);
}

@media (min-width: 576px) { .container-sm, .container { max-width: 540px; } }
@media (min-width: 768px) { .container-md, .container-sm, .container { max-width: 720px; } }
@media (min-width: 992px) { .container-lg, .container-md, .container-sm, .container { max-width: 960px; } }
@media (min-width: 1200px) { .container-xl, .container-lg, .container-md, .container-sm, .container { max-width: 1140px; } }
@media (min-width: 1400px) { .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container { max-width: 1320px; } }

.container-md is fluid below md and capped at the breakpoint widths from md up. Useful for layouts that should be full-width on phones and gutter-bounded on tablets+.

Customising Bootstrap 5 breakpoints

Override the $grid-breakpoints and $container-max-widths maps in your Sass before importing Bootstrap:

// custom-bootstrap.scss
$grid-breakpoints: (
  xs: 0,
  sm: 600px,
  md: 900px,
  lg: 1200px,
  xl: 1500px,
  xxl: 1800px
);

$container-max-widths: (
  sm: 580px,
  md: 880px,
  lg: 1180px,
  xl: 1480px,
  xxl: 1780px
);

@import "bootstrap/scss/bootstrap";

Order matters — the override must come BEFORE the bootstrap import. Bootstrap's variables use !default, so an earlier definition wins.

Bootstrap 4 breakpoints

Same five breakpoints as Bootstrap 5 minus xxl:

@media (min-width: 576px) { ... }   /* sm */
@media (min-width: 768px) { ... }   /* md */
@media (min-width: 992px) { ... }   /* lg */
@media (min-width: 1200px) { ... }  /* xl */

Sass mixins are the same names as Bootstrap 5: media-breakpoint-up, down, only, between. But:

• media-breakpoint-down(xs) was deprecated in Bootstrap 4.3 and removed in 5.0. Use media-breakpoint-up(sm) with logical inversion, or write a max-width query directly.
• media-breakpoint-between(xs, sm) was removed in Bootstrap 5.0. The equivalent is media-breakpoint-down(sm).
• The Bootstrap 4 xl breakpoint is 1200px; Bootstrap 5 added xxl at 1400px. Migration projects should check whether they relied on the implicit "extra-large means very large" assumption.

Bootstrap 3 breakpoints (legacy)

Bootstrap 3 used four breakpoints with different infix labels and a single min-width per range:

/* Extra small (phones, less than 768px) */
/* No media query — mobile-first default */

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { ... }

Bootstrap 3 was LESS-based. The variables are:

@screen-xs: 480px;
@screen-sm: 768px;
@screen-md: 992px;
@screen-lg: 1200px;

If you're still maintaining a Bootstrap 3 site in 2026, upgrading is the right call — Bootstrap 3 hit end-of-life in 2019 and receives no security patches.

Bootstrap 2.3.2 breakpoints (very legacy)

Included for the (rare) case of inheriting an ancient codebase:

@media (min-width: 1200px) { ... }                          /* Large desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }    /* Portrait tablet */
@media (max-width: 767px) { ... }                           /* Phone to tablet */
@media (max-width: 480px) { ... }                           /* Phone */

Bootstrap vs Tailwind breakpoints

The most common cross-framework question. Tailwind's default breakpoints don't match Bootstrap's exactly:

md is the only exact match. Bootstrap's sm (576px) sits between Tailwind's "phone" and Tailwind's sm (640px). Bootstrap's xxl (1400px) is lower than Tailwind's 2xl (1536px).

If you're porting a layout from Bootstrap to Tailwind (or vice versa), don't assume the labels translate — check the pixel values. Tailwind's tokens are configurable via tailwind.config.js:

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      sm: "576px",
      md: "768px",
      lg: "992px",
      xl: "1200px",
      "2xl": "1400px",
    },
  },
};

That matches Bootstrap's set if you need parity during a partial migration.

Common gotchas

Don't mix min-width and max-width queries randomly. Bootstrap is mobile-first — every breakpoint utility uses min-width. If you write a custom max-width: 767px rule and a Bootstrap utility class on the same element, the cascade order becomes unpredictable. Stick to one direction (mobile-first preferred) for your own rules.

media-breakpoint-down(md) excludes the md breakpoint. It compiles to max-width: 767.98px, which stops at the byte before md. If you want "from 0 up to and including md", use media-breakpoint-down(lg) instead — that's max-width: 991.98px, covering xs, sm, and md.

The 0.02px epsilon catches people off-guard. A rule with max-width: 768px and Bootstrap's min-width: 768px overlap by 1px because 768px is both bounds. Bootstrap uses 767.98px to avoid the collision. Your custom rules should follow the same convention.

Print stylesheets ignore min-width queries unless you also include screen in the media list. Bootstrap defaults to @media (min-width: ...) (implicitly screen); for print-friendly layouts, write @media screen and (min-width: ...) explicitly.

Don't use xs as a class infix. Bootstrap removed the xs infix in 4.0 because xs IS the default — write .col-6 not .col-xs-6. The xs label still exists for breakpoint maps and media-breakpoint-only(xs), but classes don't take the infix.

What to do next

For the broader frontend tooling that uses these breakpoints in 2026:

• Top 5 Claude Code Tools for Designers and Frontend Developers in 2026 covers the AI-assisted CSS/component tooling that complements Bootstrap workflows.

For the day-to-day developer-tools setup:

• Top 5 Claude Code Skills Every Developer Should Install — the broader Claude Code skill set including the impeccable skill for production-grade UI generation.

FAQ