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.

Practice

1. What is the correct way to nest a row inside a Bootstrap grid layout?

easy

A. Place a .row inside a .col element

B. Place a .col inside a .container directly

C. Place a .container inside a .row

D. Place a .row directly inside another .row

Solution

1. Step 1: Understand Bootstrap grid nesting rules

   Bootstrap requires that a .row must be inside a .container or .col for proper alignment.

2. Step 2: Identify correct nesting for rows and columns

   When nesting, a .row should be placed inside a .col to maintain the grid structure and spacing.

3. Final Answer:

   Place a .row inside a .col element -> Option A

4. Quick Check:

   Nesting rows inside columns = Place a .row inside a .col element [OK]

Hint: Always nest .row inside .col for layout [OK]

Common Mistakes:

• Putting .row directly inside another .row
• Placing .col directly inside .container without a row
• Nesting .container inside .row

2. Which of the following is the correct syntax to nest a row inside a column in Bootstrap?

easy

A. <div class='col'><div class='row'><div class='col'></div></div></div>

B. <div class='row'><div class='col'><div class='row'></div></div></div>

C. <div class='row'><div class='row'><div class='col'></div></div></div>

D. <div class='col'><div class='col'><div class='row'></div></div></div>

Solution

1. Step 1: Check the outer container

   The outermost element should be a .col to allow nesting inside it.

2. Step 2: Verify the nested structure

   Inside the .col, a .row is correctly nested, and inside that row, columns can be placed.

3. Final Answer:

   <div class='col'><div class='row'><div class='col'></div></div></div> -> Option A

4. Quick Check:

   Row inside col, then col inside row =

   <div class='col'><div class='row'><div class='col'></div></div></div>

   [OK]

Hint: Nest .row inside .col, then add .col inside row [OK]

Common Mistakes:

• Starting with .row instead of .col for nesting
• Nesting .row directly inside another .row
• Using .col inside .col without a row

3. Given the following Bootstrap code, what will be the visual layout in the browser?

<div class='container'>
  <div class='row'>
    <div class='col-6'>Left</div>
    <div class='col-6'>
      <div class='row'>
        <div class='col-6'>Top Right</div>
        <div class='col-6'>Bottom Right</div>
      </div>
    </div>
  </div>
</div>

medium

A. Left column takes half width; right column splits into two equal columns stacked vertically

B. Left column takes full width; right column is below left column

C. Left column takes half width; right column splits into two equal columns side by side horizontally

D. Left and right columns both take full width stacked vertically

Solution

1. Step 1: Analyze the outer row columns

   The outer row has two columns each with col-6, so they split the container horizontally 50% each.

2. Step 2: Analyze the nested row inside the right column

   The right column contains a nested row with two col-6 columns, which split that right half horizontally into two equal parts side by side.

3. Final Answer:

   Left column takes half width; right column splits into two equal columns side by side horizontally -> Option C

4. Quick Check:

   Nested row splits right col horizontally = Left column takes half width; right column splits into two equal columns side by side horizontally [OK]

Hint: Nested rows split inside parent column horizontally by default [OK]

Common Mistakes:

• Thinking nested columns stack vertically by default
• Assuming nested row splits full container width
• Confusing col-6 with full width

4. Identify the error in this Bootstrap nested grid code:

<div class='container'>
  <div class='row'>
    <div class='row'>
      <div class='col'>Nested Column</div>
    </div>
  </div>
</div>

medium

A. Missing .container around the nested .row

B. A .row is nested directly inside another .row without a .col

C. The nested .col should be .col-12

D. The outer .row should be .col

Solution

1. Step 1: Check nesting rules for rows and columns

   Bootstrap requires that a .row must be inside a .col when nested.

2. Step 2: Identify the incorrect nesting

   The code nests a .row directly inside another .row without wrapping it in a .col, which breaks the grid structure.

3. Final Answer:

   A .row is nested directly inside another .row without a .col -> Option B

4. Quick Check:

   Row inside row without col = A .row is nested directly inside another .row without a .col [OK]

Hint: Never put .row directly inside another .row [OK]

Common Mistakes:

• Nesting rows without columns
• Assuming .col is optional inside rows
• Confusing container placement

5. You want to create a layout where the left half of the page has two stacked sections, and the right half has a single section. Which Bootstrap structure correctly nests rows and columns to achieve this?

hard

A. <div class='row'>
<div class='col-6'>
<div class='row'>
<div class='col-6'>Top Left</div>
<div class='col-6'>Bottom Left</div>
</div>
</div>
<div class='col-6'>Right Side</div>
</div>

B. <div class='row'>
<div class='col-6'>Left Side</div>
<div class='col-6'>
<div class='col-12'>Right Top</div>
<div class='col-12'>Right Bottom</div>
</div>
</div>

C. <div class='container'>
<div class='row'>
<div class='col-6'>
<div class='col-12'>Top Left</div>
<div class='col-12'>Bottom Left</div>
</div>
<div class='col-6'>Right Side</div>
</div>
</div>

D. <div class='row'>
<div class='col-6'>
<div class='row'>
<div class='col-12'>Top Left</div>
<div class='col-12'>Bottom Left</div>
</div>
</div>
<div class='col-6'>Right Side</div>
</div>

Solution

1. Step 1: Understand the layout goal

   The left half should have two stacked sections, so inside the left col-6, we need a nested row with two full-width columns stacked vertically.

2. Step 2: Check the nesting structure

   <div class='row'>
     <div class='col-6'>
       <div class='row'>
         <div class='col-12'>Top Left</div>
         <div class='col-12'>Bottom Left</div>
       </div>
     </div>
     <div class='col-6'>Right Side</div>
   </div>

   nests a .row inside the left .col-6 and uses two .col-12 columns stacked vertically, which is correct. The right .col-6 is a single section.

3. Final Answer:

   <div class='row'><div class='col-6'><div class='row'><div class='col-12'>Top Left</div><div class='col-12'>Bottom Left</div></div></div><div class='col-6'>Right Side</div></div> -> Option D

4. Quick Check:

   Nested row with stacked full-width cols inside left half =

   <div class='row'>
     <div class='col-6'>
       <div class='row'>
         <div class='col-12'>Top Left</div>
         <div class='col-12'>Bottom Left</div>
       </div>
     </div>
     <div class='col-6'>Right Side</div>
   </div>

   [OK]

Hint: Stack sections with nested row and full-width cols inside a col [OK]

Common Mistakes:

• Placing columns directly inside columns without a row
• Using wrong column widths for stacking
• Missing nested row inside the left column