Nesting rows and columns in Bootsrap - Mini Project: Build & Apply

Nesting Rows and Columns with Bootstrap

📖 Scenario: You are building a simple webpage layout using Bootstrap. You want to create a section where a row contains two columns, and inside the first column, you want to nest another row with two smaller columns. This helps organize content clearly and responsively.

🎯 Goal: Create a Bootstrap layout with a main row containing two columns. Inside the first column, nest another row with two columns. Use Bootstrap classes correctly to ensure the layout is responsive and structured.

📋 What You'll Learn

Use a <div> with class container as the main wrapper.

Create a main <div> with class row inside the container.

Inside the main row, create two columns with class col-6 each.

Nest a row inside the first col-6 column.

Inside the nested row, create two columns with class col-6 each.

Add simple text inside each column to identify them (e.g., 'Main Col 1', 'Nested Col 1').

Use semantic HTML and Bootstrap 5 classes.

Ensure the code is valid HTML5 with proper structure and indentation.

💡 Why This Matters

🌍 Real World

Nesting rows and columns is common in real websites to create complex layouts like dashboards, product pages, or forms with multiple sections.

💼 Career

Understanding Bootstrap's grid system and nesting helps front-end developers build responsive and organized web pages efficiently.

1

Create the main container and row

Create a <div> with class container. Inside it, create a <div> with class row. This sets up the main layout structure.

Bootsrap

Hint

Remember, the container holds the row, which holds columns.

2

Add two main columns inside the row

Inside the row, add two <div> elements with class col-6 each. These are the two main columns side by side.

Bootsrap

Hint

Use col-6 to split the row into two equal columns.

3

Nest a row with two columns inside the first main column

Inside the first col-6 column, add a nested <div> with class row. Inside this nested row, add two columns with class col-6 each.

Bootsrap

Hint

Remember to nest the row inside the first column, then add two columns inside that nested row.

4

Add text labels inside all columns

Add the text Main Col 1 inside the first main column, Main Col 2 inside the second main column. Inside the nested columns, add Nested Col 1 and Nested Col 2 respectively.

Bootsrap

Hint

Place the text inside the correct columns to identify them visually.

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