Grid Columns, Breakpoints and Responsive Layouts

The real power of the Bootstrap grid appears when layouts change shape at different screen sizes. A three-column desktop page can stack into a single column on phones without a line of custom CSS. This lesson covers the six breakpoints, responsive column classes, offsets, ordering, and alignment so you can build layouts that adapt gracefully everywhere.

The Six Breakpoints

Bootstrap defines six breakpoints, each a minimum viewport width:

| Breakpoint | Infix | Min width | |-----------|-------|-----------| | Extra small | (none) | 0 | | Small | sm | 576px | | Medium | md | 768px | | Large | lg | 992px | | Extra large | xl | 1200px | | Extra extra large | xxl | 1400px |

Because Bootstrap is mobile-first, a class like col-md-6 means "from md and up, span 6 tracks." Below md, the element falls back to whatever smaller class applies, or to full width.

Responsive Column Classes

Combine several classes on one element to describe its width at each size:

html

<div class="row">
  <div class="col-12 col-md-6 col-lg-4">Card A</div>
  <div class="col-12 col-md-6 col-lg-4">Card B</div>
  <div class="col-12 col-md-6 col-lg-4">Card C</div>
</div>

On phones each card takes the full row (12 of 12). On tablets (md) two cards fit per line (6 of 12 each). On laptops (lg) all three sit side by side (4 of 12 each). This stack-then-split pattern is the backbone of most responsive pages.

Row Columns Shorthand

When every column in a row should be the same width, row-cols-* classes on the row are shorter:

html

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

This renders one column per row on phones, two on tablets and three on laptops, no matter how many items you add. It is ideal for product grids and card galleries.

Offsetting and Reordering Columns

Offsets push a column to the right by a number of tracks. offset-md-3 on a col-md-6 centers a half-width column from md upward:

html

<div class="row">
  <div class="col-md-6 offset-md-3">Centered form area</div>
</div>

Order utilities change visual order without touching the HTML. order-1 through order-5, plus order-first and order-last, all come in responsive flavors. A common trick is showing the sidebar below the article on mobile but first on desktop using order-lg-first.

Vertical and Horizontal Alignment

Rows are flex containers, so flexbox utilities align their children:

align-items-start, align-items-center, align-items-end on the row align columns vertically.
justify-content-center, justify-content-between, justify-content-end distribute columns horizontally when they span fewer than 12 tracks.
align-self-* on a single column overrides the row alignment for that column only.

Testing Responsiveness

Use your browser devtools device toolbar to drag the viewport across 576, 768, 992 and 1200 pixels and watch the layout snap at each breakpoint. Testing at the exact boundary widths catches most layout bugs early.

Key Takeaways

Six breakpoints (xs to xxl) drive all responsive behavior, mobile-first.
Stack classes like col-12 col-md-6 col-lg-4 to reshape layouts per size.
row-cols-* sets uniform column counts with less markup.
Offsets shift columns; order utilities rearrange them per breakpoint.

Next lesson: Typography and Utility Classes, the fastest way to style text and spacing.