Bootstrap Grid System | Nikhil Learn Hub

Introduction

The Bootstrap Grid System is a powerful, mobile-first flexbox-based layout system that allows you to create responsive page layouts using a series of containers, rows, and columns. It divides the screen into 12 equal columns, and you can specify how many columns each element should span at different screen sizes (breakpoints).

How the Grid Works

The grid system consists of three main components:

Container - The outermost wrapper that centers and pads your content.
Row - A horizontal group of columns.
Columns - The actual content holders. Column widths are set using classes like .col-4 (4 out of 12 columns).

Basic Structure

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

In the example above, three equal-width columns will automatically share the 12 columns (4 each).

Grid Breakpoints (Responsive Tiers)

Bootstrap 5 provides six default breakpoints:

Breakpoint	Class infix	Width
Extra small	(none)	< 576px
Small	sm	>= 576px
Medium	md	>= 768px
Large	lg	>= 992px
Extra large	xl	>= 1200px
XXL	xxl	>= 1400px

Responsive Column Example

<div class="container">
  <div class="row">
    <div class="col-sm-6 col-md-4 col-lg-3">Column</div>
    <div class="col-sm-6 col-md-4 col-lg-3">Column</div>
    <div class="col-sm-6 col-md-4 col-lg-3">Column</div>
    <div class="col-sm-6 col-md-4 col-lg-3">Column</div>
  </div>
</div>

Explanation:

On small screens (>=576px): each column takes 6 columns -> 2 columns per row.
On medium screens (>=768px): each column takes 4 columns -> 3 columns per row.
On large screens (>=992px): each column takes 3 columns -> 4 columns per row.

Auto-layout Columns

Equal Width Columns (No number needed)

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

Setting One Column Width (auto-layout for others)

<div class="container">
  <div class="row">
    <div class="col">Auto</div>
    <div class="col-6">Fixed 6 columns</div>
    <div class="col">Auto</div>
  </div>
</div>

Column Nesting

You can nest rows and columns inside existing columns. Just add a new .row inside a .col.

<div class="container">
  <div class="row">
    <div class="col-sm-9">
      Level 1: .col-sm-9
      <div class="row">
        <div class="col-8 col-sm-6">Nested: .col-8 .col-sm-6</div>
        <div class="col-4 col-sm-6">Nested: .col-4 .col-sm-6</div>
      </div>
    </div>
    <div class="col-sm-3">Level 1: .col-sm-3</div>
  </div>
</div>

Note: The nested columns add up to 12 inside their parent column, not the full container width.

Offsetting and Reordering Columns

Offsetting Columns - use .offset-{breakpoint}-{number}.

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  </div>
</div>

Tip: Offsets add margin-left. The sum of column width + offset should never exceed 12.

Reordering Columns (Order Classes) - use .order-{breakpoint}-{number}, .order-first, .order-last.

<div class="container">
  <div class="row">
    <div class="col order-last">First in HTML, last visually</div>
    <div class="col">Second in HTML</div>
    <div class="col order-first">Third in HTML, first visually</div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col order-3">1st HTML -> 3rd position</div>
    <div class="col order-1">2nd HTML -> 1st position</div>
    <div class="col order-2">3rd HTML -> 2nd position</div>
  </div>
</div>

Spacing and Alignment Utilities

Margin Utilities for Spacing

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 ms-auto">.col-md-4 .ms-auto</div>
  </div>
  <div class="row">
    <div class="col-md-3 me-auto">.col-md-3 .me-auto</div>
    <div class="col-md-3">.col-md-3</div>
  </div>
</div>

Vertical Alignment (row classes):

Class	Effect
`align-items-start`	Top alignment
`align-items-center`	Middle alignment
`align-items-end`	Bottom alignment

<div class="container">
  <div class="row align-items-center" style="height: 200px;">
    <div class="col">Aligned to center vertically</div>
    <div class="col">Another column</div>
  </div>
</div>

Individual Column Alignment: use align-self-start, align-self-center, align-self-end.

<div class="container">
  <div class="row" style="height: 150px;">
    <div class="col align-self-start">Top</div>
    <div class="col align-self-center">Middle</div>
    <div class="col align-self-end">Bottom</div>
  </div>
</div>

Horizontal Alignment (row classes):

Class	Effect
`justify-content-start`	Left alignment (default)
`justify-content-center`	Centered
`justify-content-end`	Right alignment
`justify-content-around`	Even spacing with space around
`justify-content-between`	First/last at edges, space between
`justify-content-evenly`	Equal space between and around

<div class="container">
  <div class="row justify-content-center">
    <div class="col-4">Centered column</div>
    <div class="col-4">Another centered column</div>
  </div>
  <div class="row justify-content-between">
    <div class="col-3">Left</div>
    <div class="col-3">Right</div>
  </div>
</div>

Gutters and Complete Example

No-Gutters: Use .g-0 on the row to remove gaps between columns.

<div class="container">
  <div class="row g-0">
    <div class="col">No gap here</div>
    <div class="col">No gap here</div>
    <div class="col">No gap here</div>
  </div>
</div>

Custom gutter width: Use .g-{number}, .gy-{number}, .gx-{number} (0 to 5).

<div class="container">
  <div class="row g-4">
    <div class="col">Wider gap</div>
    <div class="col">Wider gap</div>
  </div>
</div>

Complete Real-World Example:

<div class="container">
  <!-- Header -->
  <div class="row">
    <div class="col-12 text-center">
      <h1>My Website</h1>
    </div>
  </div>

  <!-- Navigation -->
  <div class="row">
    <div class="col-12">
      <nav>Home | About | Services | Contact</nav>
    </div>
  </div>

  <!-- Main Content + Sidebar -->
  <div class="row">
    <div class="col-md-8">
      <h2>Main Article</h2>
      <p>This is the primary content area. On medium screens and up, it takes 8 of 12 columns. On smaller screens, it stacks full width.</p>
    </div>
    <div class="col-md-4">
      <h3>Sidebar</h3>
      <p>Sidebar content appears to the right on desktop, below on mobile.</p>
    </div>
  </div>

  <!-- Footer -->
  <div class="row">
    <div class="col-12 text-center">
      <p>&copy; 2025 My Website</p>
    </div>
  </div>
</div>

Common Mistakes, Quick Reference, Conclusion

Common Mistakes to Avoid

Forgetting the container: Columns and rows must be inside a .container or .container-fluid.
Columns without a row: Columns should always be direct children of a .row.
Sum exceeding 12: Column numbers in a single row should add up to 12 (unless using auto-layout).
Mixing breakpoints incorrectly: Use the smallest breakpoint needed (for example, .col-md-6 applies from md upward).

Quick Reference Card

What you want	Class to use
Fixed width container	`.container`
Full width container	`.container-fluid`
Equal width columns	`.col`
Specific width column	`.col-4`, `.col-sm-6`, etc.
Offset a column	`.offset-md-3`
Change order	`.order-first`, `.order-last`, `.order-2`
Vertical alignment (row)	`.align-items-center`
Horizontal alignment (row)	`.justify-content-center`
Remove gutters	`.g-0`
Nest columns	Add new `.row` inside `.col`

Conclusion

The Bootstrap Grid System is one of the most flexible and widely used responsive layout tools. By mastering containers, rows, columns, and breakpoints, you can create complex, responsive designs that work seamlessly across all devices. Practice combining the different classes shown above, and refer to this tutorial whenever you need to build a new layout.