Nesting rows and columns in Bootsrap - Browser Rendering Trace

Render Flow - Nesting rows and columns

Read <div class='container'>

→Create container node

↓

Read <div class='row'>

→Create row node

↓

Read <div class='col'>

→Create column node

↓

Read nested <div class='row'>

→Create nested row node

↓

Read nested <div class='col'>

→Create nested column node

↓

Add content

↓

Close nested col

↓

Close nested row

↓

Close col

↓

Close row

↓

Close container

The browser reads the container, then the row, then columns inside it. When it finds a nested row inside a column, it creates a new flex container inside that column, allowing nested columns to align properly.

Render Steps - 3 Steps

Code Added:<div class="container"> with <div class="row"> and two <div class="col">

Before

[Empty page]

→

After

[container]
  [row]
    [col] Parent Column
    [col] Parent Column 2

The container holds a row with two columns side by side. Columns share the row's horizontal space equally.

🔧 Browser Action:Creates flex container for row, flex items for columns, calculates widths and positions columns side by side.

Code Sample

This code shows a Bootstrap container with a row of two columns. The first column contains a nested row with two nested columns inside it.

Bootsrap

<div class="container">
  <div class="row">
    <div class="col">
      Parent Column
      <div class="row">
        <div class="col">Nested Column 1</div>
        <div class="col">Nested Column 2</div>
      </div>
    </div>
    <div class="col">Parent Column 2</div>
  </div>
</div>

Render Quiz - 3 Questions

After step 2, what layout do you see inside the first parent column?

A The nested row pushes the second parent column down

B A new horizontal row inside the first column with space for nested columns

C Nested columns appear outside the parent container

D The first column disappears

Common Confusions - 2 Topics

Why do nested columns not align with parent columns?

Nested columns are inside a nested row, which is a new flex container inside the parent column. They align horizontally inside that nested row, not with the parent row.

💡 Nested rows create new horizontal groups inside columns; nested columns align inside those groups.

Why does adding a nested row inside a column not break the layout?

Because Bootstrap rows use flexbox, a nested row inside a column becomes a new flex container inside that column, allowing nested columns to layout properly without breaking the parent row.

💡 Rows can be nested inside columns to create new horizontal flex containers.

Property Reference

Bootstrap Class	Role	Display Type	Visual Effect	Common Use
container	Wraps content with padding and centers	block	Centers content with horizontal padding	Page layout wrapper
row	Creates horizontal flex container	flex	Aligns child columns horizontally with gutters	Group columns in a horizontal line
col	Defines a flex item column	flex item	Shares row space equally or by size	Create columns inside rows
Nested row	Row inside a column	flex	Creates new flex container inside column	Nest grids inside columns for complex layouts

Concept Snapshot

Bootstrap uses .row as a flex container to align .col horizontally. A .col can contain a nested .row to create nested grids. Nested rows create new flex containers inside columns. Nested columns align horizontally inside nested rows. This allows complex layouts with rows inside columns.