Estimated reading: 4 minutes 81 views

🧱 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.

« Previous Next »

Share Now :