Nesting rows and columns in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

What is the visual layout of nested Bootstrap columns?

Consider the following Bootstrap HTML code. What will be the visual arrangement of the colored boxes when rendered in a browser?

<div class="container">
  <div class="row">
    <div class="col-6 bg-primary text-white p-3">Left Column</div>
    <div class="col-6">
      <div class="row">
        <div class="col-6 bg-success text-white p-3">Nested Left</div>
        <div class="col-6 bg-warning p-3">Nested Right</div>
      </div>
    </div>
  </div>
</div>

Bootsrap

<div class="container">
  <div class="row">
    <div class="col-6 bg-primary text-white p-3">Left Column</div>
    <div class="col-6">
      <div class="row">
        <div class="col-6 bg-success text-white p-3">Nested Left</div>
        <div class="col-6 bg-warning p-3">Nested Right</div>
      </div>
    </div>
  </div>
</div>

A The page shows two rows stacked vertically, each with two columns side by side with different background colors.

B The page shows one full-width column with all colored boxes stacked vertically inside.

C The page shows four columns side by side, all equal width, each with different background colors.

D The page shows two main columns side by side. The right column contains two smaller columns side by side inside it, each with their own background colors.

💡 Hint

Remember that nesting a row inside a column creates a new horizontal group inside that column.

The outer row has two columns each taking half the width (col-6). The right column contains a nested row with two columns each taking half the width of that nested row. So visually, the left half is a blue box, and the right half is split into two smaller boxes side by side with green and yellow backgrounds.

❓ selector

intermediate

Which Bootstrap class is required to nest columns properly?

You want to nest columns inside another column in Bootstrap. Which class must you add to the container wrapping the nested columns to ensure proper alignment and spacing?

A row

B container

C col

D container-fluid

💡 Hint

Nested columns must be inside a horizontal grouping container.

In Bootstrap, to nest columns inside a column, you must wrap the nested columns inside a div with the class 'row'. This creates a new horizontal group for the nested columns to align properly.

🧠 Conceptual

advanced

Why should you avoid placing a 'container' class inside a Bootstrap column?

What is the main reason to avoid placing a div with class 'container' inside a Bootstrap column when nesting rows and columns?

A Because 'container' disables the Bootstrap grid system inside it.

B Because 'container' removes all padding and margins, causing content to overflow.

C Because 'container' adds horizontal padding and fixed width, breaking the grid alignment inside the column.

D Because 'container' automatically adds a background color that conflicts with columns.

💡 Hint

Think about how 'container' affects width and spacing.

The 'container' class adds fixed max-width and horizontal padding which can break the alignment and spacing of nested columns inside a parent column. Instead, use 'row' to nest columns properly without changing container width.

📝 Syntax

advanced

Identify the syntax error in this nested Bootstrap grid code

What is wrong with the following Bootstrap HTML code snippet?

<div class="row">
  <div class="col-8">
    <div class="col-6 bg-info p-2">Nested Column</div>
    <div class="col-6 bg-secondary p-2">Nested Column</div>
  </div>
  <div class="col-4 bg-dark text-white p-2">Side Column</div>
</div>

Bootsrap

<div class="row">
  <div class="col-8">
    <div class="row">
      <div class="col-6 bg-info p-2">Nested Column</div>
      <div class="col-6 bg-secondary p-2">Nested Column</div>
    </div>
  </div>
  <div class="col-4 bg-dark text-white p-2">Side Column</div>
</div>

A The 'row' class should be replaced with 'container' for nesting.

B The nested columns are missing a wrapping 'row' div inside the 'col-8' column.

C The 'col-4' class should be inside the 'col-8' column.

D The 'col-6' classes should be changed to 'col-8' to fit inside the parent column.

💡 Hint

Nested columns must be inside a 'row' to align properly.

In Bootstrap, columns must be direct children of a 'row'. Here, the nested 'col-6' divs are inside a 'col-8' without a 'row' wrapper, which breaks the grid layout and causes layout issues.

❓ accessibility

expert

How to improve accessibility in nested Bootstrap grid layouts?

You have a complex nested grid layout using Bootstrap rows and columns. Which practice best improves accessibility for screen reader users navigating this layout?

A Use semantic HTML5 elements like <section> or <article> with ARIA landmarks to group related content inside nested columns.

B Add role="presentation" to all rows and columns to hide them from assistive technologies.

C Use only divs with Bootstrap classes and avoid semantic tags to keep layout simple.

D Add tabindex="-1" to all nested columns to prevent keyboard focus.

💡 Hint

Think about how screen readers understand page structure.

Using semantic HTML5 elements with ARIA landmarks helps screen readers understand the page structure and navigate nested content better. Avoid hiding content or removing keyboard focus unnecessarily.

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