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.