Bootstrap Grid Options — Breakpoints, Alignment, Offsets, Ordering

In this tutorial, you will learn about Bootstrap Grid Options. We cover key concepts, practical examples, and best practices to help you master this topic.

Bootstrap's grid system includes six responsive breakpoints, alignment utilities for vertical and horizontal positioning, offset classes for spacing, and ordering classes to rearrange columns at different screen sizes.

What You'll Learn

You will learn how to use breakpoint-specific column classes, align content vertically and horizontally within rows, add column offsets, and change column order responsively.

Why It Matters

Real layouts need more than equal columns. DodaTech's pricing page requires different layouts at each breakpoint — three columns on desktop, two on tablet, and stacked on mobile — using breakpoint and offset classes.

Real-World Use

Durga Antivirus Pro's feature comparison page uses offset classes to center a highlighted column and ordering classes to move the sidebar below content on mobile.

flowchart LR
    A[Grid System] --> B[Breakpoints]
    A --> C[Alignment]
    A --> D[Offsets]
    A --> E[Ordering]
    B --> F[Responsive Control]
    C --> F
    D --> F
    E --> F
    style A fill:#7952b3,stroke:#563d7c,color:#fff
    style F fill:#22c55e,stroke:#16a34a,color:#fff

Breakpoint Reference

Bootstrap 5 has six breakpoints:

Breakpoint classes mean "apply this at this size and above." col-md-6 means 6 columns starting at medium screens and continuing at all larger sizes.

Responsive Column Combinations

<div class="container">
  <div class="row">
    <div class="col-12 col-md-6 col-lg-4 col-xl-3">Card 1</div>
    <div class="col-12 col-md-6 col-lg-4 col-xl-3">Card 2</div>
    <div class="col-12 col-md-6 col-lg-4 col-xl-3">Card 3</div>
    <div class="col-12 col-md-6 col-lg-4 col-xl-3">Card 4</div>
  </div>
</div>

Expected output: On extra small screens, 1 column per row. On md, 2 columns. On lg, 3 columns. On xl, 4 columns.

Vertical Alignment

Align columns vertically within a row using alignment classes on the row:

<div class="container">
  <div class="row align-items-start" style="height: 150px;">
    <div class="col">Top aligned</div>
    <div class="col">Top aligned</div>
  </div>
  <div class="row align-items-center" style="height: 150px;">
    <div class="col">Center aligned</div>
    <div class="col">Center aligned</div>
  </div>
  <div class="row align-items-end" style="height: 150px;">
    <div class="col">Bottom aligned</div>
    <div class="col">Bottom aligned</div>
  </div>
</div>

Expected output: Three rows with columns aligned to the top, center, and bottom of each row respectively.

Align individual columns differently using align-self-*:

<div class="row" style="height: 150px;">
  <div class="col align-self-start">Top</div>
  <div class="col align-self-center">Middle</div>
  <div class="col align-self-end">Bottom</div>
</div>

Expected output: Three columns in the same row aligned to top, center, and bottom independently.

Horizontal Alignment

Align columns horizontally within the row:

<div class="container">
  <div class="row justify-content-center">
    <div class="col-4">Centered column</div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">Left</div>
    <div class="col-4">Right</div>
  </div>
  <div class="row justify-content-around">
    <div class="col-3">Spaced</div>
    <div class="col-3">Spaced</div>
    <div class="col-3">Spaced</div>
  </div>
</div>

Expected output: Three rows demonstrating centered, space-between, and space-around column distribution.

Column Offsets

Offsets push columns to the right by adding empty space to the left:

<div class="container">
  <div class="row">
    <div class="col-4 offset-4">Centered (offset-4 pushes 4 columns left)</div>
  </div>
  <div class="row">
    <div class="col-3 offset-3">Offset 3</div>
    <div class="col-3 offset-3">Offset 3</div>
  </div>
</div>

Expected output: First row has a single column centered with 4 columns of space on each side. Second row has two columns each offset by 3.

Offsets also support breakpoints: offset-md-2 applies only at md and above.

Column Ordering

Reorder columns responsively:

<div class="container">
  <div class="row">
    <div class="col order-3">First in HTML, last visually</div>
    <div class="col order-1">Second in HTML, first visually</div>
    <div class="col order-2">Third in HTML, second visually</div>
  </div>
</div>

Expected output: Columns display in order 1-2-3 visually even though they appear 3-1-2 in the HTML.

Use order-first and order-last for extreme positions, and order-{breakpoint}-* for responsive reordering.

Common Mistakes

1. Offsets That Exceed 12

An offset-8 on a col-6 would total 14, pushing the column off the grid. Offsets plus column width must not exceed 12.

2. Misunderstanding Breakpoint Direction

col-md-6 applies from md upward. If you want a different layout only at lg and above, use col-lg-6 and set the base with col-12.

3. Offsets on Responsive Classes

offset-md-3 only applies at md and above. Below md, the offset disappears and the column aligns flush left.

4. Order Classes Without Base Column Classes

Ordering only works when columns have explicit or auto widths. Always pair order-* with col-* or col.

5. Alignment Classes on Wrong Elements

align-items-* goes on the row, not the column. justify-content-* also goes on the row. align-self-* goes on individual columns.

Practice Questions

1. What breakpoint prefix should you use for tablet-sized screens? md (768px and above).

2. How do you center a column horizontally in its row? Use offset-* to push it to the center, or mx-auto on the column with justify-content-center on the row.

3. What does col-lg-4 offset-lg-2 mean? On large screens and above, the column spans 4 columns and is pushed right by 2 columns.

4. How do you reorder columns visually without changing the HTML? Use order-* classes (e.g., order-1, order-2, order-3) to change visual order.

5. What is the default vertical alignment of columns? align-items-start — columns stretch to fill the row height by default (align-items-stretch).

Challenge

Create a layout with three columns that show in order: sidebar, main content, extra. On mobile, reorder them so main content appears first, then sidebar, then extra.

FAQ

Mini Project

Build a product showcase page with a featured product column (offset to center) and three supporting product columns below. The featured product should be first in HTML but display at the top visually.

What's Next

Now master Columns and Gutters for precise spacing control. Then move to Bootstrap Typography for styling text.