0
0
Bootsrapmarkup~5 mins

Nesting rows and columns in Bootsrap

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Nesting rows and columns helps you create complex layouts inside a webpage. It lets you organize content in smaller sections inside bigger sections.

You want to divide a page into main parts and then split those parts further.
You need a sidebar with multiple sections inside it.
You want a grid inside a grid, like a photo gallery inside a content box.
You want to control spacing and alignment inside a column.
You want to create responsive layouts that adjust on different screen sizes.
Syntax
Bootsrap
<div class="row">
  <div class="col">
    <div class="row">
      <div class="col">Nested content</div>
    </div>
  </div>
</div>

Always put a .row inside a .col when nesting.

Use columns inside the nested row to keep the grid structure.

Examples
This example shows a row with two main columns. The first main column has a nested row with two smaller columns inside.
Bootsrap
<div class="row">
  <div class="col-6">
    <div class="row">
      <div class="col-6">Nested 1</div>
      <div class="col-6">Nested 2</div>
    </div>
  </div>
  <div class="col-6">Main column 2</div>
</div>
Here, a nested row has one column that takes full width inside the parent column.
Bootsrap
<div class="row">
  <div class="col">
    <div class="row">
      <div class="col">Nested full width</div>
    </div>
  </div>
</div>
Sample Program

This page shows a main row with two columns. The first column contains a nested row with two smaller columns inside. Borders and padding help you see the layout clearly.

Bootsrap
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Nesting Rows and Columns Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
  <main class="container mt-4">
    <h1 class="mb-4">Nesting Rows and Columns</h1>
    <div class="row border p-3">
      <div class="col-8 border p-3">
        Main Column 1
        <div class="row mt-3">
          <div class="col-6 border p-2">Nested Column 1</div>
          <div class="col-6 border p-2">Nested Column 2</div>
        </div>
      </div>
      <div class="col-4 border p-3">Main Column 2</div>
    </div>
  </main>
</body>
</html>
OutputSuccess
Important Notes

Use borders or background colors temporarily to see how your nested grid looks.

Remember that nested rows must be inside columns to keep the layout working.

Bootstrap columns add padding (gutter) automatically for spacing.

Summary

Nesting rows and columns lets you build detailed layouts inside bigger sections.

Always put a .row inside a .col when nesting.

Use borders or colors to check your layout visually while building.