🧱 Bootstrap 5 – Columns, Gutters & Nesting Explained with Examples

🧲 Introduction – Understanding Columns, Gutters & Nesting in Bootstrap 5

Bootstrap 5’s grid system lets you build responsive layouts using rows and columns. In this article, we’ll focus specifically on columns, gutters (spacing between columns), and how to nest grids for more complex layouts.

🎯 In this guide, you’ll learn:

• How .col-* works in defining column widths
• How to control spacing between columns using gutters (.g-, .gx-, .gy-)
• How to nest rows and columns inside other columns
• Practical code examples for each case

---

📐 Bootstrap 5 Columns – Layout Basics

Bootstrap uses a 12-column grid. You can divide columns equally or assign specific widths using col-*.

✅ Equal Columns Using .col

<div class="row">
  <div class="col bg-light p-3">Column 1</div>
  <div class="col bg-secondary text-white p-3">Column 2</div>
</div>

🔍 Code Explanation:

• .col: Automatically divides space equally among siblings inside a .row
• Here, both columns take up 50% each (6/12)

---

✅ Custom Widths Using .col-*

<div class="row">
  <div class="col-4 bg-warning p-3">Width: 4</div>
  <div class="col-8 bg-success text-white p-3">Width: 8</div>
</div>

🔍 Code Explanation:

• .col-4: Occupies 4/12 of the row
• .col-8: Occupies the remaining 8/12
• The sum must be ≤12 per .row

---

🧩 Responsive Columns with Breakpoints

<div class="row">
  <div class="col-12 col-md-6 col-lg-3 bg-info text-white p-3">Responsive Column</div>
</div>

🔍 Code Explanation:

• col-12: Full width on mobile
• col-md-6: 6/12 width on tablets (≥768px)
• col-lg-3: 3/12 width on desktops (≥992px)

---

↔️ Bootstrap 5 Gutters – Column Spacing Utilities

Gutters are the horizontal and vertical spacing between columns. Bootstrap 5 provides utility classes to control them:

Class	Description
.g-0	No gutters
.g-1–.g-5	Increases gutter spacing
.gx-*	Horizontal gutters only
.gy-*	Vertical gutters only

✅ Example – Custom Gutter Spacing:

<div class="row g-4">
  <div class="col bg-light p-3">Column A</div>
  <div class="col bg-dark text-white p-3">Column B</div>
</div>

🔍 Code Explanation:

• g-4: Adds 1.5rem gutter spacing both horizontally and vertically

---

✅ Example – Horizontal Gutters Only

<div class="row gx-2">
  <div class="col bg-primary text-white p-3">Left</div>
  <div class="col bg-danger text-white p-3">Right</div>
</div>

---

🧱 Nesting Columns – Grid Inside a Grid

Bootstrap allows you to nest a new .row inside a .col for more detailed layouts.

✅ Example – Nested Grid:

<div class="row">
  <div class="col-6">
    <div class="row">
      <div class="col-6 bg-warning 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-info text-white p-2">Main Column</div>
</div>

🔍 Code Explanation:

• Outer .row has two main columns (6/12 each)
• First column contains another .row with two nested .col-6 columns

---

🛠️ Best Practices – Columns, Gutters & Nesting

Tip	Why It’s Useful
Don’t exceed 12 columns per .row	Prevents layout break
Use g-* utilities to space content safely	Keeps layout responsive and clean
Use .container as outer wrapper	Aligns layout with Bootstrap’s padding system
Nest rows inside .col-* only	Ensures nested grid flows within parent column
Avoid deep nesting unless necessary	Simpler grids are easier to maintain

---

📌 Summary – Recap & Layout Takeaways

Bootstrap 5 makes it easy to build responsive, well-structured layouts using its flexible column, gutter, and nesting system.

🔍 Key Takeaways:

• Columns can be equal (.col) or sized (.col-4, col-md-6, etc.)
• Gutters (.g-*, gx-*, gy-*) control spacing between columns
• Nesting allows grids inside grids for complex layouts
• All layouts follow the 12-column rule and mobile-first design

⚙️ Perfect for creating multi-column sections, dashboards, and flexible cards layouts with minimal CSS.

---

❓ FAQs – Bootstrap 5 Columns, Gutters & Nesting

❓ Can I use more than 12 columns in a row?
❌ No. Columns exceeding 12 wrap to the next line automatically.

---

❓ How do I remove gutter spacing?
✅ Use .g-0 to eliminate spacing between columns.

---

❓ Can I nest rows directly inside another row?
❌ No. You must nest a .row inside a .col-*, not directly into a .row.

---

❓ Is nesting responsive by default?
✅ Yes. Nested rows follow the same responsive rules as the top-level grid.

---

❓ What’s the difference between .gx-* and .gy-*?
✅ .gx-* applies horizontal spacing only, .gy-* applies vertical spacing only.

---

Share Now :