Grid System

Q: What happens if the total number of columns in a row is less than 12?

The space on the right remains empty. For example, col-4 + col-4 takes 8/12, leaving 4/12 empty. If you need to fill the remaining space, use col (auto-sizes).

Q: What is the difference between grid gutter and the spacing utility class gap-* ?

g-* (gutter) is specific to the grid and controls the gap between columns by applying to row . gap-* is a general flex/grid utility class. In grid layouts, g-* is recommended.

1. Introduction

(1) Prerequisites

Understand the 6 breakpoint system (xs/sm/md/lg/xl/xxl)
Be familiar with responsive display utility classes d-{breakpoint}-*

(2) 🎯 What You Will Learn

Understand the three-layer structure of the 12-column grid system (Container > Row > Column)
Master responsive column usage (col-12 col-md-6 col-lg-4)
Learn to use offset-* for column offset
Master grid nesting and gutter control
Be able to independently build complete page layouts

(3) Pain Point

Alice used Flexbox to create a navbar last lesson. Now she wants to create the main body layout for her homepage—a left sidebar (3 columns) + right content area (9 columns). Implementing complex responsive multi-column structures with traditional CSS layout is very tedious.

(4) Solution

Using Bootstrap's grid system, you only need <div class="row"><div class="col-3">Sidebar</div><div class="col-9">Content</div></div>. The grid is Bootstrap's core layout tool, based on a 12-column Flexbox grid. Using row + col-* allows you to build page layouts of any complexity.

(5) Benefit

After using the grid system, Alice completed the classic blog layout with a left 3-column and right 9-column structure using just a few lines of tags. Combined with breakpoint suffixes, she easily achieved responsive adaptation.

2. Basic Structure

The grid always follows a Container -> Row -> Column nesting structure:

HTML

<div class="container">
  <div class="row">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

▶ Try it Yourself

▶ Example: Basic Grid Layout

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid Basics</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .demo-col { background: #0d6efd; color: #fff; padding: 1rem; border: 1px solid #fff; text-align: center; }
  </style>
</head>
<body>
  <div class="container py-4">
    <div class="row mb-3">
      <div class="col demo-col">col (4/12)</div>
      <div class="col demo-col">col (4/12)</div>
      <div class="col demo-col">col (4/12)</div>
    </div>
    <div class="row mb-3">
      <div class="col-4 demo-col" style="background: #198754;">col-4</div>
      <div class="col-8 demo-col" style="background: #dc3545;">col-8</div>
    </div>
    <div class="row">
      <div class="col-3 demo-col" style="background: #6f42c1;">col-3</div>
      <div class="col demo-col" style="background: #fd7e14;">col (auto)</div>
      <div class="col-3 demo-col" style="background: #20c997;">col-3</div>
    </div>
  </div>
</body>
</html>

▶ Try it Yourself

(1) Column Behavior Comparison

Class	Behavior	Use Case
`col`	Evenly divide the remaining space	Equal-width columns
`col-{n}`	Fixed width of n/12	Fixed-ratio layout
`col-auto`	Width adapts to content	Button groups, badges
`col-{breakpoint}`	Full width below the breakpoint, proportional above	Responsive layout

3. Responsive Columns

HTML

<div class="row">
  <div class="col-12 col-md-6 col-lg-4 bg-primary p-3 text-white">Sidebar</div>
  <div class="col-12 col-md-6 col-lg-8 bg-info p-3 text-white">Content</div>
</div>

▶ Try it Yourself

Syntax	< 768px	768-991px	>= 992px
`col-12 col-md-6 col-lg-4`	Full width	1/2 width	1/3 width
`col-6 col-md-4 col-xl-3`	1/2 width	1/3 width	1/4 width
`col-md-8`	Full width	2/3 width	2/3 width

4. Multi-Rows and Wrapping

When the total number of columns in a row exceeds 12, the extra columns automatically wrap to the next line:

HTML

<div class="row">
  <div class="col-4 bg-primary p-3 text-white">4</div>
  <div class="col-4 bg-success p-3 text-white">4</div>
  <div class="col-4 bg-danger p-3 text-white">4</div>
  <div class="col-4 bg-warning p-3">4 (wraps to next row)</div>
  <div class="col-4 bg-info p-3 text-white">4</div>
</div>

▶ Try it Yourself

5. Offset

HTML

<div class="row">
  <div class="col-3 bg-primary p-3 text-white">Sidebar</div>
  <div class="col-6 offset-3 bg-info p-3 text-white">Offset 3 columns right</div>
</div>

<div class="row">
  <div class="col-6 offset-3 bg-success p-3 text-white text-center">
    Centered column (col-6 + offset-3)
  </div>
</div>

▶ Try it Yourself

Syntax	Effect
`col-6 offset-3`	6 columns centered
`col-4 offset-4`	4 columns centered
`col-8 offset-2`	8 columns offset left

6. Nesting

Nest another set of row + col inside a column:

HTML

<div class="row">
  <div class="col-8 bg-light p-3">
    <h6>Main Section</h6>
    <div class="row">
      <div class="col-6 bg-primary text-white p-2">Nested 6</div>
      <div class="col-6 bg-success text-white p-2">Nested 6</div>
    </div>
  </div>
  <div class="col-4 bg-info p-3 text-white">Sidebar</div>
</div>

▶ Try it Yourself

7. Gutters

HTML

<div class="row g-0">
  <div class="col-6"><div class="bg-primary text-white p-3">g-0: no gap</div></div>
  <div class="col-6"><div class="bg-success text-white p-3">g-0: no gap</div></div>
</div>

<div class="row g-4 mt-2">
  <div class="col-6"><div class="bg-primary text-white p-3">g-4: 24px gap</div></div>
  <div class="col-6"><div class="bg-success text-white p-3">g-4: 24px gap</div></div>
</div>

▶ Try it Yourself

Class	Horizontal	Vertical
`g-0`	0	0
`g-3`	1rem	1rem
`g-5`	3rem	3rem
`gx-4`	1.5rem	0
`gy-4`	0	1.5rem

8. Grid Architecture & Reference

(1) Grid System Architecture

graph TB
    subgraph Container Layer
        A[.container / .container-fluid] --> B[Max-width + Horizontal Padding]
    end
    subgraph Row Layer
        B --> C[.row]
        C --> D[Negative margin to offset container padding]
        C --> E[Gutter spacing control]
    end
    subgraph Column Layer
        D --> F[.col-*]
        E --> F
        F --> G[12-column flex system]
        F --> H[Responsive breakpoints col-md-*]
        F --> I[Offset offset-*]
        F --> J[Order order-*]
    end
    subgraph Sub-content
        G --> K[Nested grid row > col]
        H --> K
        I --> K
    end

(2) Grid Level Reference

Level	Element	Class	Width	Description
Container	`<div>`	`container`	Responsive fixed width	Centered, limits max-width
Container	`<div>`	`container-fluid`	100%	Full width
Container	`<div>`	`container-{sm\|md\|lg\|xl\|xxl}`	Corresponding breakpoint	Full width until specified breakpoint
Row	`<div>`	`row`	100% + negative margin	Flex container
Column	`<div>`	`col`	Auto-divided	Auto-sizes
Column	`<div>`	`col-{n}`	n/12	Fixed ratio
Column	`<div>`	`col-{bp}-{n}`	Responsive	Proportional above breakpoint

(3) Grid Breakpoint Column Reference

Class Name	<576px	>=576px	>=768px	>=992px	>=1200px	>=1400px
`col-12`	100%	100%	100%	100%	100%	100%
`col-sm-6`	100%	50%	50%	50%	50%	50%
`col-md-4`	100%	100%	33.3%	33.3%	33.3%	33.3%
`col-lg-3`	100%	100%	100%	25%	25%	25%
`col-xl-2`	100%	100%	100%	100%	16.67%	16.67%
`col-12 col-md-6 col-lg-4`	100%	100%	50%	33.3%	33.3%	33.3%
`col-6 col-md-4 col-xl-3`	50%	50%	33.3%	33.3%	25%	25%

▶ Example: Blog Page Layout

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Blog Layout</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <header class="mb-4">
      <h1>My Blog</h1>
      <p class="text-muted">Sharing technology and thoughts</p>
    </header>

    <div class="row g-4">
      <!-- Main content -->
      <article class="col-12 col-lg-8">
        <div class="card mb-3">
          <div class="card-body">
            <h2 class="card-title h4">Grid Layout in Action</h2>
            <p class="card-text text-muted small">January 20, 2026</p>
            <p>Using col-8 + col-4 to create a classic blog layout with article area on the left and sidebar on the right.</p>
            <button class="btn btn-sm btn-primary">Read More</button>
          </div>
        </div>
        <div class="card">
          <div class="card-body">
            <h2 class="card-title h4">Bootstrap 5 New Features</h2>
            <p class="card-text text-muted small">January 18, 2026</p>
            <p>Bootstrap 5 introduces CSS variables, improved grid system, and new utility classes.</p>
            <button class="btn btn-sm btn-primary">Read More</button>
          </div>
        </div>
      </article>

      <!-- Sidebar -->
      <aside class="col-12 col-lg-4">
        <div class="bg-light p-4 rounded">
          <h5>About the Author</h5>
          <p class="small mb-0">Full-stack developer passionate about front-end technology and UI design.</p>
        </div>
        <div class="bg-light p-4 rounded mt-3">
          <h5>Categories</h5>
          <ul class="list-unstyled small mb-0">
            <li>Front-end (12)</li>
            <li>Back-end (8)</li>
            <li>Design (5)</li>
          </ul>
        </div>
      </aside>
    </div>
  </div>
</body>
</html>

▶ Try it Yourself

▶ Example: Dashboard Grid

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dashboard Grid</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container-fluid py-4 bg-light" style="min-height: 100vh;">
    <h3 class="mb-4">Dashboard</h3>

    <!-- Stats row -->
    <div class="row g-3 mb-4">
      <div class="col-6 col-xl-3">
        <div class="bg-primary text-white p-3 rounded">
          <h6 class="mb-1">Users</h6>
          <h3 class="mb-0">1,284</h3>
        </div>
      </div>
      <div class="col-6 col-xl-3">
        <div class="bg-success text-white p-3 rounded">
          <h6 class="mb-1">Orders</h6>
          <h3 class="mb-0">356</h3>
        </div>
      </div>
      <div class="col-6 col-xl-3">
        <div class="bg-warning text-dark p-3 rounded">
          <h6 class="mb-1">Revenue</h6>
          <h3 class="mb-0">$12,450</h3>
        </div>
      </div>
      <div class="col-6 col-xl-3">
        <div class="bg-info text-white p-3 rounded">
          <h6 class="mb-1">Activity</h6>
          <h3 class="mb-0">78%</h3>
        </div>
      </div>
    </div>

    <!-- Charts + Table -->
    <div class="row g-3">
      <div class="col-12 col-lg-8">
        <div class="bg-white p-4 rounded shadow-sm">
          <h5>Chart Area</h5>
          <div class="bg-light" style="height: 200px;"></div>
        </div>
      </div>
      <div class="col-12 col-lg-4">
        <div class="bg-white p-4 rounded shadow-sm">
          <h5>Recent Activity</h5>
          <ul class="list-unstyled small mb-0">
            <li class="mb-2">Zhang San registered a new account</li>
            <li class="mb-2">Li Si submitted an order</li>
            <li>Wang Wu updated their profile</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

▶ Try it Yourself

▶ Example: Nested Grid

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Nested Grid</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .outer { background: #e9ecef; border: 2px dashed #0d6efd; padding: 1rem; }
    .inner { background: #0d6efd; color: #fff; padding: 0.75rem; border: 1px solid #fff; text-align: center; }
  </style>
</head>
<body>
  <div class="container py-4">
    <h3 class="mb-3">Nested Grid Demo</h3>

    <div class="row">
      <div class="col-8">
        <div class="outer">
          <h6>Main Column col-8</h6>
          <div class="row g-2">
            <div class="col-6"><div class="inner">Nested col-6</div></div>
            <div class="col-6"><div class="inner">Nested col-6</div></div>
            <div class="col-4"><div class="inner">Nested col-4</div></div>
            <div class="col-4"><div class="inner">Nested col-4</div></div>
            <div class="col-4"><div class="inner">Nested col-4</div></div>
          </div>
          <p class="small mt-2 mb-0">The 12 columns in a nested grid are calculated relative to the parent column</p>
        </div>
      </div>
      <div class="col-4">
        <div class="outer" style="height: 100%;">
          <h6>Sidebar col-4</h6>
          <p class="small mb-0">Sidebar height automatically aligns with main column content</p>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

▶ Try it Yourself

▶ Example: Responsive Product Grid

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Product Grid</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <h3 class="mb-4">Product List</h3>

    <div class="row g-3 g-lg-4">
      <div class="col-6 col-md-4 col-lg-3">
        <div class="card">
          <img src="https://via.placeholder.com/300x200/0d6efd/fff?text=Product1" class="card-img-top" alt="">
          <div class="card-body">
            <h6 class="card-title">Product Name</h6>
            <p class="card-text text-danger fw-bold mb-0">$99.00</p>
          </div>
        </div>
      </div>
      <div class="col-6 col-md-4 col-lg-3">
        <div class="card">
          <img src="https://via.placeholder.com/300x200/198754/fff?text=Product2" class="card-img-top" alt="">
          <div class="card-body">
            <h6 class="card-title">Product Name</h6>
            <p class="card-text text-danger fw-bold mb-0">$149.00</p>
          </div>
        </div>
      </div>
      <div class="col-6 col-md-4 col-lg-3">
        <div class="card">
          <img src="https://via.placeholder.com/300x200/dc3545/fff?text=Product3" class="card-img-top" alt="">
          <div class="card-body">
            <h6 class="card-title">Product Name</h6>
            <p class="card-text text-danger fw-bold mb-0">$199.00</p>
          </div>
        </div>
      </div>
      <div class="col-6 col-md-4 col-lg-3">
        <div class="card">
          <img src="https://via.placeholder.com/300x200/ffc107/000?text=Product4" class="card-img-top" alt="">
          <div class="card-body">
            <h6 class="card-title">Product Name</h6>
            <p class="card-text text-danger fw-bold mb-0">$59.00</p>
          </div>
        </div>
      </div>
    </div>

    <p class="text-muted small mt-3">
      Responsive: Mobile 2 columns (col-6) → Tablet 3 columns (col-md-4) → Desktop 4 columns (col-lg-3), spacing g-3 → g-lg-4
    </p>
  </div>
</body>
</html>

▶ Try it Yourself

❓ FAQ

Q What happens if the total number of columns in a row is less than 12?

A The space on the right remains empty. For example, col-4 + col-4 takes 8/12, leaving 4/12 empty. If you need to fill the remaining space, use col (auto-sizes).

Q What is the difference between grid gutter and the spacing utility class gap-*?

A g-* (gutter) is specific to the grid and controls the gap between columns by applying to row. gap-* is a general flex/grid utility class. In grid layouts, g-* is recommended.

Q Why are my grid columns not in the same row?

A The most common reasons: (1) Columns are not placed inside a row; (2) row is not inside a container (container/container-fluid); (3) The total column width exceeds 12, causing wrapping.

Q Is col the same as col-12?

A Visually they are the same (both 100% width), but their behavior differs. col uses flex: 1 0 0% and will evenly divide the available space among other col elements. col-12 has a fixed width: 100%.

Q How do I achieve vertical alignment in the grid?

A Grid columns are also Flexbox children, so you can directly use the align-items-* and align-self-* utility classes. Adding align-items-center to a row vertically centers all columns within the row. Adding align-self-end to a specific col aligns it to the bottom.

📖 Summary

Grid three-layer structure: container > .row > .col-*
12-column system: col-6 = 50%, col-4 = 33.3%, col-3 = 25%
Responsive implementation with breakpoint suffixes: col-12 col-md-6 col-lg-4
offset-* for column offset; nested grid column sum is still 12
g-* controls gutter spacing

📝 Assignment

⭐ Create a standard blog layout: display full-width on mobile, left col-8 article area + right col-4 sidebar on desktop.
⭐⭐ Use the grid to implement a four-column card grid: 1 column on mobile (col-12), 2 columns on tablet (col-md-6), 4 columns on desktop (col-lg-3), with g-4 spacing between cards.
⭐⭐⭐ Create an asymmetric layout: sidebar col-3 + content area col-6 + right small widget col-3.

Previous Lesson: Responsive Design · Next Lesson: Navbar

Web-Tutorial Tech Team

A team of developers maintaining programming tutorials. Each tutorial is written and reviewed by developers with expertise in that field. We work to keep our content accurate and reliable — if you spot an issue, please let us know.

About Us

404 Not Found

Grid System

1. Introduction

(1) Prerequisites

(2) 🎯 What You Will Learn

(3) Pain Point

(4) Solution

(5) Benefit

2. Basic Structure

▶ Example: Basic Grid Layout

(1) Column Behavior Comparison

3. Responsive Columns

4. Multi-Rows and Wrapping

5. Offset

6. Nesting

7. Gutters

8. Grid Architecture & Reference

(1) Grid System Architecture

(2) Grid Level Reference

(3) Grid Breakpoint Column Reference

▶ Example: Blog Page Layout

▶ Example: Dashboard Grid

▶ Example: Nested Grid

▶ Example: Responsive Product Grid

❓ FAQ

📖 Summary

📝 Assignment

🙏 帮我们做得更好