🔀 Bootstrap 5 Grid Variants – List, Use Cases & Responsive Examples
🧲 Introduction – What Are Grid Variants in Bootstrap 5?
Bootstrap 5’s grid system is built on a flexible, mobile-first 12-column layout that supports multiple variants for precise control across different screen sizes and design needs. These grid variants let you mix equal, fixed, auto, responsive, stacked, and nested column structures to achieve any layout—from simple cards to full-featured admin dashboards.
🎯 In this guide, you’ll learn:
- All major grid column variants in Bootstrap 5
- Responsive use cases for each variant
- Real HTML examples with visual descriptions
- Best practices for scalable layout structures
🧱 1. Equal-Width Columns (Auto Layout)
Use .col without a number to divide the row equally among siblings.
✅ Example:
<div class="row">
<div class="col bg-light p-3">Column A</div>
<div class="col bg-secondary text-white p-3">Column B</div>
</div>
🔍 Output:
- Both columns share equal width regardless of content.
- Works well for balanced card decks or symmetrical UI.
🧮 2. Fixed-Width Columns
Use .col-{1–12} to manually assign widths in the 12-column system.
✅ Example:
<div class="row">
<div class="col-4 bg-warning p-3">Column 4/12</div>
<div class="col-8 bg-info text-white p-3">Column 8/12</div>
</div>
🔍 Output:
- First column takes up one-third (4 out of 12)
- Second takes up two-thirds (8 out of 12)
📱 3. Responsive Columns (Breakpoint-Based)
Use col-{breakpoint}-{n} to define width changes at specific screen sizes.
✅ Example:
<div class="row">
<div class="col-12 col-sm-6 col-lg-3 bg-light p-3">Responsive</div>
</div>
🔍 Output:
- Full width on extra small screens
- 50% width at small (≥576px)
- 25% width at large (≥992px)
🧩 4. Mixed Fixed & Auto Width Columns
Mix .col (auto) with .col-* (fixed) for flexible layouts.
✅ Example:
<div class="row">
<div class="col-4 bg-primary text-white p-3">Fixed Width</div>
<div class="col bg-light p-3">Auto Width</div>
</div>
🔍 Output:
- Fixed 4-column width
- Remaining space filled by
.col
📐 5. Stacked to Horizontal Layout
Default stacking on mobile, horizontal alignment at larger breakpoints.
✅ Example:
<div class="row">
<div class="col-12 col-md-6 bg-success text-white p-3">50% on md+</div>
<div class="col-12 col-md-6 bg-secondary text-white p-3">50% on md+</div>
</div>
🔍 Output:
- Stacked on mobile (≤768px)
- Side-by-side on medium and larger screens
🔄 6. Column Wrapping (Overflow Handling)
If columns exceed 12 units, they wrap automatically.
✅ Example:
<div class="row">
<div class="col-8 bg-dark text-white p-3">8 cols</div>
<div class="col-6 bg-warning p-3">6 cols – wraps to new line</div>
</div>
🔍 Output:
- Second column wraps to a new line due to overflow (8+6 > 12)
🧱 7. Nested Grids (Grid in Grid)
Nest .row and .col inside an existing column to create complex structures.
✅ Example:
<div class="row">
<div class="col-6 bg-light p-3">
<div class="row">
<div class="col-6 bg-info text-white p-2">Nested A</div>
<div class="col-6 bg-success text-white p-2">Nested B</div>
</div>
</div>
<div class="col-6 bg-primary text-white p-3">Main Column</div>
</div>
🔍 Output:
- One main column with two nested sub-columns
- Common in card layouts or multilevel forms
↔️ 8. Gutters Control Variants (g-*, gx-*, gy-*)
Bootstrap 5 allows gutter (column spacing) customization.
✅ Example:
<div class="row gx-4 gy-2">
<div class="col bg-light p-3">Gutter Example A</div>
<div class="col bg-secondary text-white p-3">Gutter Example B</div>
</div>
🔍 Output:
- Horizontal spacing:
gx-4 - Vertical spacing:
gy-2
➕ 9. Offset Columns (offset-*)
Create spacing to push columns right.
✅ Example:
<div class="row">
<div class="col-md-4 offset-md-4 bg-warning text-center p-3">Centered Column</div>
</div>
🔍 Output:
- Column is pushed to the center by 4 columns of space on medium+ screens
🔢 10. Order Classes (order-*)
Change column visual order without changing the source order.
✅ Example:
<div class="row">
<div class="col order-2 bg-success text-white p-3">Second Visually</div>
<div class="col order-1 bg-info text-white p-3">First Visually</div>
</div>
🛠️ Summary – Bootstrap Grid Variant Highlights
🔍 Key Variants Covered:
.col,.col-*– Equal or fixed width.col-{breakpoint}-*– Responsive widths.g-*,.gx-*,.gy-*– Gutter control.offset-*– Column spacing offset.order-*– Reorder columns visually- Nested
.rowand.col– Build sub-grids
⚙️ Use these variants to create advanced layouts without writing custom CSS.
❓ FAQs – Bootstrap Grid Variants
❓ How many columns can I use in one row?
✅ You can use up to 12 units; excess columns will wrap.
❓ Can I center a column using grid variants?
✅ Yes, use .offset-* or Flexbox utilities like mx-auto.
❓ Do gutter utilities apply to nested grids?
✅ Yes, but you can override them locally using gx-0, gy-0, etc.
❓ Can I reorder columns differently at breakpoints?
✅ Yes, use classes like order-sm-1, order-lg-2 to control layout flow.
Share Now :
