---

🧱 Bootstrap 5 Grid System – Responsive Layout Demo with Columns, Rows & Gutters

🧲 Introduction – Master the Bootstrap Grid System

The Bootstrap 5 grid system is a mobile-first, responsive layout engine based on CSS Flexbox. It allows you to design complex UI structures using rows and columns that adjust across screen sizes—without writing custom CSS.

🎯 In this guide, you’ll learn:

• How to build responsive layouts using .container, .row, and .col-*
• Create equal-width and fixed-width columns
• Use gutters and nesting to organize content cleanly
• Control layout on various screen sizes using breakpoints

---

✅ Example 1 – Basic 3-Column Grid

<div class="container">
  <div class="row">
    <div class="col">Column 1</div>
    <div class="col">Column 2</div>
    <div class="col">Column 3</div>
  </div>
</div>

Class	Description
.row	Creates a horizontal flex row
.col	Auto-splits space into equal parts

📌 This layout divides the row equally among three columns. Ideal for simple layouts with balanced width.

---

✅ Example 2 – Fixed-Width Grid Columns

<div class="row">
  <div class="col-4">col-4</div>
  <div class="col-8">col-8</div>
</div>

Class	Description
.col-4	Occupies 4/12 columns (33.33%)
.col-8	Occupies 8/12 columns (66.66%)

📌 Use .col-* to create custom-width columns. Ensure the total adds up to 12 for one full-width row.

---

✅ Example 3 – Responsive Grid with Breakpoints

<div class="row">
  <div class="col-12 col-md-6">50% on md and up</div>
  <div class="col-12 col-md-6">50% on md and up</div>
</div>

Class	Function
.col-12	Full-width on small screens
.col-md-6	50% width on medium screens and larger

📌 This grid stacks on mobile but shows side-by-side columns from medium (md) devices upward.

---

✅ Example 4 – Add Spacing with Gutters

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

Class	Description
.g-4	Adds spacing (gutter) between columns/rows

📌 The .g-* utility adds uniform horizontal and vertical spacing within the grid, removing the need for manual margins.

---

✅ Example 5 – Nested Grid Layouts

<div class="row">
  <div class="col-6">
    <div class="row">
      <div class="col-6">Nested A</div>
      <div class="col-6">Nested B</div>
    </div>
  </div>
  <div class="col-6">Main B</div>
</div>

Feature	Description
Nested Grids	Use .row inside .col-* for sub-rows

📌 Nested grids allow inner layouts inside a column block. This is useful for forms, cards, or dashboards.

---

📘 Bootstrap Grid Utility Reference

Utility	Class Example	Purpose
Container	.container, .container-fluid	Wraps and centers layout or makes it full-width
Rows	.row	Groups columns horizontally
Columns	.col-*, .col-md-*	Controls column widths and responsiveness
Gutters	.g-*, .gx-*, .gy-*	Adds spacing between columns or rows
Nesting	.row inside .col-*	Enables grid layouts within a column

---

🛠️ Best Practices for Grid Layouts

Tip	Reason
Use .container	Centers content and sets max-width by breakpoint
Keep column totals to 12	Ensures proper layout structure
Use gutters (.g-*)	Avoids manual spacing with clean responsiveness
Combine breakpoints	Enables fluid layouts across devices
Nest sparingly	Prevents deeply nested grids that hurt readability

---

📌 Summary – Recap & Next Steps

Bootstrap’s responsive grid system makes it easy to build flexible, mobile-first page structures using utility-first classes.

🔍 Key Takeaways:

• Use .container, .row, and .col-* for layout basics
• Combine .col-12, .col-md-* for responsive behaviors
• Add clean spacing with .g-* and use .col-auto for flexibility
• Nest grids inside columns for modular UI sections

⚙️ Great for dashboards, pricing tables, homepages, admin panels, and multi-column forms.

---

❓ FAQs – Bootstrap 5 Grid Layout

❓ Can I use more than 12 columns in a row?
✅ Technically yes, but columns beyond 12 will wrap to a new line.

---

❓ What’s the difference between .container and .container-fluid?
✅ .container has max-widths by breakpoint, while .container-fluid always spans full width.

---

❓ Can I remove spacing between grid items?
✅ Yes. Use .g-0 to remove all gutters.

---

❓ Can .col-auto be combined with .col-*?
✅ Absolutely. Use .col-auto to let one column take as much space as its content needs, and the other .col-* to control structure.

---

Share Now :