Skip to main content
Bootstrap
CHAPTER 03 Beginner

Bootstrap Grid System

Updated: May 18, 2026
5 min read

# CHAPTER 3

Bootstrap Grid System

1. Chapter Introduction

The Bootstrap grid system is the single most important concept in Bootstrap. Every professional layout — from landing pages to admin dashboards — is built on it. Understanding the grid means understanding responsive design. It is a 12-column system: you divide the row into columns that add up to 12, and Bootstrap handles every screen size automatically.

2. Learning Objectives

  • Understand containers, rows, and columns.
  • Use breakpoint-specific column classes (col-md-6, col-lg-4).
  • Create responsive layouts that change at different screen sizes.
  • Nest grids within grids.
  • Build a responsive portfolio layout.

3. Grid Structure: Container → Row → Columns

text
123456789 
Bootstrap Grid Architecture:

.container  (max-width wrapper)
  └── .row  (flexbox row, creates columns)
       ├── .col-md-4  (column 1 — 4/12 = 33%)
       ├── .col-md-4  (column 2 — 4/12 = 33%)
       └── .col-md-4  (column 3 — 4/12 = 33%)

Rule: Columns in a row MUST add up to 12

4. Containers

html
12345678910 
<!-- Fixed-width container (max-width changes at breakpoints) -->
<div class="container">...</div>

<!-- Full-width container (always 100%) -->
<div class="container-fluid">...</div>

<!-- Responsive containers (100% until breakpoint) -->
<div class="container-sm">...</div>   <!-- 100% until sm breakpoint -->
<div class="container-md">...</div>   <!-- 100% until md breakpoint -->
<div class="container-lg">...</div>   <!-- 100% until lg breakpoint -->

5. Basic Column Usage

html
12345678910111213141516171819202122 
<!-- 3 equal columns on all screen sizes -->
<div class="container">
  <div class="row">
    <div class="col">Column 1</div>  <!-- Auto-width, equal split -->
    <div class="col">Column 2</div>
    <div class="col">Column 3</div>
  </div>
</div>

<!-- Specific widths: 4+4+4=12 -->
<div class="row">
  <div class="col-4">4 columns wide</div>
  <div class="col-4">4 columns wide</div>
  <div class="col-4">4 columns wide</div>
</div>

<!-- Different widths: 3+6+3=12 -->
<div class="row">
  <div class="col-3">Sidebar</div>
  <div class="col-6">Main Content</div>
  <div class="col-3">Aside</div>
</div>

6. Responsive Breakpoint Classes

text
12345678910 
Bootstrap 5 Breakpoints:

Class prefix | Breakpoint | Min-width
-------------|------------|----------
col-         | Extra small| <576px (always active)
col-sm-      | Small      | ≥576px
col-md-      | Medium     | ≥768px
col-lg-      | Large      | ≥992px
col-xl-      | Extra large| ≥1200px
col-xxl-     | XX-Large   | ≥1400px
html
12345678910 
<!-- The magic of responsive grids:
     - Mobile: each div takes full width (col-12 by default)
     - Tablet (≥768px): 2 columns
     - Desktop (≥992px): 4 columns -->
<div class="row">
  <div class="col-12 col-md-6 col-lg-3">Card 1</div>
  <div class="col-12 col-md-6 col-lg-3">Card 2</div>
  <div class="col-12 col-md-6 col-lg-3">Card 3</div>
  <div class="col-12 col-md-6 col-lg-3">Card 4</div>
</div>

7. Row Gutters (Column Gaps)

html
123456789 
<!-- g-4 adds equal gap between columns and rows -->
<div class="row g-4">
  <div class="col-md-4"><div class="p-3 bg-light">1</div></div>
  <div class="col-md-4"><div class="p-3 bg-light">2</div></div>
  <div class="col-md-4"><div class="p-3 bg-light">3</div></div>
</div>

<!-- gx-3: horizontal gap only | gy-5: vertical gap only -->
<div class="row gx-3 gy-5">...</div>

8. Alignment and Ordering

html
1234567891011121314 
<!-- Vertical alignment of columns -->
<div class="row align-items-start">...</div>
<div class="row align-items-center">...</div>
<div class="row align-items-end">...</div>

<!-- Horizontal alignment -->
<div class="row justify-content-center">...</div>
<div class="row justify-content-between">...</div>
<div class="row justify-content-end">...</div>

<!-- Column offset -->
<div class="row">
  <div class="col-md-4 offset-md-4">Centered column</div>
</div>

9. Nested Grids

html
1234567891011121314 
<!-- A column can contain its own row and columns! -->
<div class="container">
  <div class="row">
    <div class="col-md-8">
      Main content
      <!-- Nested grid inside a column -->
      <div class="row">
        <div class="col-6">Inner left</div>
        <div class="col-6">Inner right</div>
      </div>
    </div>
    <div class="col-md-4">Sidebar</div>
  </div>
</div>

10. Mini Project: Responsive Portfolio Layout

html
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Portfolio</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" />
  <style>
    .portfolio-card { background: #f8f9fa; border-radius: 12px; padding: 2rem; text-align: center; transition: box-shadow .2s; }
    .portfolio-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.12); }
    .portfolio-img { width: 100%; height: 200px; object-fit: cover; border-radius: 8px; background: #dee2e6; display: flex; align-items: center; justify-content: center; font-size: 3rem; }
  </style>
</head>
<body class="bg-light">

  <!-- Header -->
  <div class="container py-5 text-center">
    <h1 class="display-5 fw-bold">Jane Developer</h1>
    <p class="lead text-muted">Frontend Developer · UI Designer · Bootstrap Expert</p>
  </div>

  <!-- Portfolio Grid -->
  <div class="container pb-5">
    <h2 class="text-center mb-4">My Work</h2>
    <!-- 1 col on mobile, 2 on tablet, 3 on desktop -->
    <div class="row g-4">
      <div class="col-12 col-sm-6 col-lg-4">
        <div class="portfolio-card">
          <div class="portfolio-img mb-3">🛒</div>
          <h5>E-Commerce UI</h5>
          <p class="text-muted small">Bootstrap + Vanilla JS</p>
          <a href="#" class="btn btn-outline-primary btn-sm">View Project</a>
        </div>
      </div>
      <div class="col-12 col-sm-6 col-lg-4">
        <div class="portfolio-card">
          <div class="portfolio-img mb-3">📊</div>
          <h5>Admin Dashboard</h5>
          <p class="text-muted small">Bootstrap 5 + Chart.js</p>
          <a href="#" class="btn btn-outline-primary btn-sm">View Project</a>
        </div>
      </div>
      <div class="col-12 col-sm-6 col-lg-4">
        <div class="portfolio-card">
          <div class="portfolio-img mb-3">🌐</div>
          <h5>Landing Page</h5>
          <p class="text-muted small">Bootstrap + Animations</p>
          <a href="#" class="btn btn-outline-primary btn-sm">View Project</a>
        </div>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

11. Common Mistakes

  • Forgetting .row wrapper: Columns (col-*) MUST be direct children of a .row. Without .row, columns won't align correctly.
  • Columns not adding up to 12: If you use col-5 + col-5, you get 10/12 — there will be empty space. Use col-5 + col-7 or col-auto.

12. MCQs

Question 1

How many columns does Bootstrap's grid system have?

Question 2

What class creates a full-width container?

Question 3

What is the minimum width for the md breakpoint?

Question 4

What do classes col-12 col-md-6 col-lg-4 mean?

Question 5

What class adds gaps between columns?

Question 6

What must direct children of .row be?

Question 7

col-md-4 offset-md-4 does what?

Question 8

What class vertically centers columns in a row?

Question 9

Can you nest rows and columns?

Question 10

What class justifies columns to the center horizontally?

13. Interview Questions

  • Q: Explain the Bootstrap grid system and how it achieves responsive layouts.
  • Q: What happens when Bootstrap column classes exceed 12 in a row?

14. Summary

The Bootstrap 12-column grid is the foundation of responsive web design. Container → Row → Columns is the three-level structure. Adding breakpoint prefixes (col-md-, col-lg-) makes the same HTML display differently on each screen size, eliminating the need for complex CSS media queries.

15. Next Chapter Recommendation

With layouts mastered, in Chapter 4: Typography and Text Utilities, we control headings, display text, font weights, text alignment, and text transformations using Bootstrap's comprehensive text system.

Finish this Chapter

Save your progress on your learning path and prepare for coding interview challenges.

Previous Chapter Installing Bootstrap and Environment Setup
Next Chapter Typography and Text Utilities

Discussion

Join the discussion

Log in or create a free account to participate.

Sort: ·

Explore More

📖 Related Tutorials 6

❓ Related Quizzes 1