BootstrapHow-ToBeginner · 3 min read

How to Nest Columns in Bootstrap: Simple Guide

To nest columns in Bootstrap, place a .row inside an existing .col-* column, then add new .col-* elements inside that row. This creates a nested grid that follows Bootstrap's responsive layout rules.

📐

Syntax

To nest columns, you start with a .row container. Inside it, add a .col-* column. Then, inside that column, add another .row and place nested .col-* columns inside this inner row.

.row: Defines a horizontal group of columns.
.col-*: Defines a column with a specific width.
Nested .row inside a .col-*: Creates a new grid inside the column.

html

<div class="row">
  <div class="col-6">
    <div class="row">
      <div class="col-6">Nested col 1</div>
      <div class="col-6">Nested col 2</div>
    </div>
  </div>
  <div class="col-6">Main col 2</div>
</div>

Output

Two main columns side by side; the first main column contains two nested columns side by side inside it.

💻

Example

This example shows a row with two main columns. The first main column contains a nested row with two smaller columns inside it. The second main column is a single column.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Nested Columns Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container mt-3">
    <div class="row border p-2">
      <div class="col-6 border">
        <div class="row">
          <div class="col-6 border bg-light text-center">Nested col 1</div>
          <div class="col-6 border bg-light text-center">Nested col 2</div>
        </div>
      </div>
      <div class="col-6 border bg-secondary text-white text-center">Main col 2</div>
    </div>
  </div>
</body>
</html>

Output

A page with a container showing two main columns side by side. The left column has two nested columns inside it with light backgrounds. The right column is a single column with a dark background and white text.

⚠️

Common Pitfalls

Common mistakes when nesting columns include:

Not wrapping nested columns inside a .row. Nested .col-* must be inside a .row to align properly.
Forgetting to add the .col-* class to nested columns, which breaks the grid.
Using too many nested rows without container or padding, causing layout overflow or misalignment.

html

<!-- Wrong: Nested columns without a row -->
<div class="row">
  <div class="col-6">
    <div class="col-6">Nested col 1</div>
    <div class="col-6">Nested col 2</div>
  </div>
  <div class="col-6">Main col 2</div>
</div>

<!-- Right: Nested columns inside a row -->
<div class="row">
  <div class="col-6">
    <div class="row">
      <div class="col-6">Nested col 1</div>
      <div class="col-6">Nested col 2</div>
    </div>
  </div>
  <div class="col-6">Main col 2</div>
</div>

Output

The wrong example breaks layout because nested columns are not inside a row; the right example shows correct nested columns inside a row.

📊

Quick Reference

Remember these tips when nesting columns in Bootstrap:

Always put nested .col-* inside a .row.
Use .col-* classes to define widths at each nesting level.
Use container or padding to avoid content touching edges.
Test responsiveness by resizing the browser.

✅

Key Takeaways

Nest columns by placing a .row inside a .col-* and adding .col-* inside that row.

Always wrap nested columns inside a .row to keep Bootstrap's grid working correctly.

Use .col-* classes at every level to control column widths responsively.

Avoid nesting too deeply without containers or padding to prevent layout issues.

Test your nested grid on different screen sizes to ensure responsiveness.