Estimated reading: 4 minutes 321 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 :