Bootstrap responsive design: breakpoints and grid explained

Bootstrap 5 has six responsive tiers: extra small (below 576 px), sm (576 px and up), md (768 px), lg (992 px), xl (1200 px) and xxl (1400 px). Every responsive class uses those names, so col-md-6 means “half width from 768 px up” and d-lg-none means “hidden from 992 px up”. Like Tailwind, Bootstrap is mobile first: classes without a breakpoint apply to all sizes, and breakpoint classes apply from that width upwards.

Bootstrap 5 breakpoints and container widths

These are the defaults documented in the Bootstrap breakpoints docs. .container-fluid is always full width, and .container-md (and the other infixes) is full width until its breakpoint, then fixed.

The responsive grid in practice

Bootstrap’s grid has 12 columns. You set how many each element spans at each breakpoint:

<div class="container">
  <div class="row g-4">
    <div class="col-12 col-md-6 col-lg-4">Card</div>
    <div class="col-12 col-md-6 col-lg-4">Card</div>
    <div class="col-12 col-md-6 col-lg-4">Card</div>
  </div>
</div>

That gives one card per row on phones, two from 768 px and three from 992 px. col-12 can be left out, since a column without a size in a row stretches anyway, but writing it makes intent clear.

For grids of equal items, row columns are shorter:

<div class="row row-cols-1 row-cols-md-2 row-cols-lg-4 g-3">

Reordering content at a breakpoint uses order classes, such as order-first order-md-0, which helps when an image should come after its heading on phones but sit beside it on desktop.

Responsive utilities you will use constantly

• Display: d-none d-md-block hides on phones and shows from 768 px; d-lg-none hides from 992 px.
• Flex direction: flex-column flex-md-row stacks on phones and lines up in a row from md.
• Spacing: p-3 p-lg-5 uses smaller padding on small screens.
• Text alignment: text-center text-md-start.
• Navbar: navbar-expand-lg shows the full menu from 992 px and the toggler button below it.
• Tables: wrap wide tables in .table-responsive so they scroll inside their own box.
• Images: .img-fluid sets max-width: 100% and height: auto.

Media query mixins in Sass

If you compile Bootstrap from Sass, use its mixins rather than hard-coded pixel values:

.hero {
  padding: 2rem 1rem;

  @include media-breakpoint-up(lg) {
    padding: 5rem 2rem;
  }
}

@include media-breakpoint-down(md) { /* below 768px */ }
@include media-breakpoint-between(md, xl) { /* 768px to 1199.98px */ }
@include media-breakpoint-only(md) { /* 768px to 991.98px */ }

Note the Bootstrap 5 meaning of media-breakpoint-down(md): it targets widths below the md breakpoint, compiled as max-width: 767.98px. The .98 avoids overlaps with fractional widths on high-density screens. Bootstrap 4 used the next breakpoint up for the same mixin, which catches people out when they upgrade.

Customising Bootstrap breakpoints

Change the Sass maps before importing Bootstrap:

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

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1200px,
  xxl: 1440px
);

@import "bootstrap/scss/bootstrap";

Keep the keys in ascending order and keep xs: 0. Should you change them at all? Only if your design has a real reason. The responsive breakpoints guide explains how to choose widths from your content rather than from device lists.

Common Bootstrap responsive mistakes

• Using col-6 for phones. Two columns on a 360 px screen leaves about 160 px per column after gutters; text and buttons rarely fit.
• Forgetting the navbar breakpoint. A navbar with many items set to navbar-expand-md can overflow between 768 and 992 px.
• Hiding content with d-none on mobile instead of rearranging it. Google indexes the mobile page.
• Mixing custom media queries with different values than the Bootstrap ones, so components switch at 768 px but your custom CSS switches at 760 px.

Testing a Bootstrap layout

Check each tier at its exact width and 1 px below: 575/576, 767/768, 991/992, 1199/1200 and 1399/1400. In Chrome DevTools, the device toolbar’s Show media queries option displays the breakpoints as bars you can click.

Then check named phones with their user agent and pixel ratio, which a mobile view extension does from one button. The full process is in how to test responsive design.

Frequently asked questions

What are the Bootstrap 5 breakpoints?

576 px (sm), 768 px (md), 992 px (lg), 1200 px (xl) and 1400 px (xxl), with an unnamed extra-small tier below 576 px.

What does col-md-6 mean in Bootstrap?

The element spans 6 of 12 columns, half the row, from the md breakpoint (768 px) upwards. Below 768 px it takes the full width unless another class says otherwise.

Is Bootstrap mobile first?

Yes. Classes without a breakpoint apply to all screen sizes, and breakpoint classes override them from that width up.