Bootstrap 5 Responsive Grid: Containers, Rows, and Breakpoints

Use the grid, not custom media queries, for standard page layouts

If your page stacks into a single narrow column on phones but needs two or three columns on desktops, Bootstrap 5's responsive grid handles the breakpoint logic without writing custom CSS. The useful rule is: wrap content in a container, split rows into columns, and choose a breakpoint infix that matches when the layout should change.

How the Bootstrap 5 grid works

Bootstrap 5 uses a mobile-first flexbox grid. "Mobile-first" means base styles target small screens first, and larger layouts are layered on top as the viewport widens. A breakpoint is a minimum viewport width at which the layout changes. The grid divides each row into 12 equal units. You assign columns by telling Bootstrap how many of those 12 units a column should occupy at a given breakpoint.

There are six breakpoints, each tied to a minimum viewport width:

• xs — extra small, the base size with no infix
• sm — small, typically 576 pixels and up
• md — medium, typically 768 pixels and up
• lg — large, typically 992 pixels and up
• xl — extra large, typically 1200 pixels and up
• xxl — extra extra large, typically 1400 pixels and up

A class such as .col-md-6 means "six columns wide at the medium breakpoint and every larger breakpoint." Below medium, the column reverts to the base behavior, which is usually full width unless you also declared a .col-* class without an infix. Grid classes apply at the specified breakpoint and all larger breakpoints unless overridden, so .col-sm-4 .col-lg-3 produces four columns on small screens and three on large screens.

Worked layout: two columns on medium screens, three on large screens

This markup creates a centered, responsive container. On small screens the items stack vertically. At medium width they split into two equal columns. At large width they become three equal columns.

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

Place this in any HTML file after loading Bootstrap 5 CSS. No build step or JavaScript is required for the grid itself. Open the page in a browser and resize the window: below 768 pixels the cards should stack, between 768 and 991 pixels they should sit side by side in pairs, and at 992 pixels or wider all three should appear on one row.

The container centers the content and applies a maximum width that grows at each breakpoint. The .row element creates a flexbox wrapper and cancels negative margins so columns align correctly. Each .col-* must be a direct child of .row; skipping the row breaks gutter clearing and can cause misalignment.

Container choices

Class	Behavior
.container	Responsive fixed width that changes at each breakpoint; centers content.
.container-fluid	Full viewport width at all sizes.
.container-md	Full width until the medium breakpoint, then fixed and centered.

Use .container for most page layouts. Use .container-fluid only when the design truly needs edge-to-edge content.

Limits and common mistakes

• Twelve-column ceiling. A single row holds 12 column units. If you place three .col-md-5 columns in one row, the total is 15 and the third column drops to a new line. Keep the sum at or below 12, or intentionally use wrapping.
• Missing breakpoint infix. .col-6 applies at every size, including extra-small. If you want stacking on phones, add .col-sm-6 or .col-md-6 so the two-column layout starts only at the breakpoint you choose.
• Columns outside a row. Putting .col-* directly inside .container removes the row's negative margin offset, and gutters will not align with other rows on the page.
• Nesting without a new row. To nest a grid inside a column, create a new .row inside that column. The nested row again has 12 units relative to the parent column's width, not the full page.

Check the result

1. Open the page in a browser and resize the viewport across the breakpoint thresholds.
2. Use the browser's element inspector to confirm each .col-* element is a direct child of a .row element.
3. Confirm no row contains column classes whose numbers add up to more than 12 unless wrapping is intended.
4. Inspect the compiled Bootstrap CSS or Sass variables if you need to verify exact breakpoint pixel values for your installed version.

Bootstrap 5 dropped jQuery and Internet Explorer support, and class names differ from Bootstrap 4. If you are migrating older markup, do not treat Bootstrap 4 grid classes as drop-in replacements; test each layout after switching versions.