12-column grid model in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding Bootstrap's 12-Column Grid

In Bootstrap's 12-column grid system, what happens if you create a row with three columns each having class col-5?

A The columns will stack vertically because total columns exceed 12

B The columns will fit in one row with some empty space

C The columns will overlap each other horizontally

D The columns will automatically resize to fit exactly in one row

💡 Hint

Remember, the total of column numbers in a row should not exceed 12.

Bootstrap's grid divides the row into 12 equal parts. If the sum of column sizes exceeds 12, the extra columns wrap to the next line. Here, 5 + 5 + 5 = 15, which is more than 12, so the third column moves to the next line.

📝 Syntax

intermediate

Correct Usage of Column Classes

Which of the following Bootstrap column class combinations will create two equal-width columns in a row?

A <div class="col-4"></div><div class="col-4"></div>

B <div class="col-5"></div><div class="col-7"></div>

C <div class="col-6"></div><div class="col-6"></div>

D <div class="col-3"></div><div class="col-9"></div>

💡 Hint

Two equal columns must each take half of the 12 columns.

Each column should take 6 out of 12 columns to be equal width. Option C uses col-6 twice, making two equal halves.

❓ layout

advanced

Visual Result of Nested Columns

What will be the visual layout result of this Bootstrap code?

<div class="row">
  <div class="col-8">
    <div class="row">
      <div class="col-6">A</div>
      <div class="col-6">B</div>
    </div>
  </div>
  <div class="col-4">C</div>
</div>

A A and B take full width above C which takes full width below

B A, B, and C all share the row equally in three columns

C A and B stack vertically inside the left 8 columns; C is below them

D A and B share the left 8 columns equally; C occupies the right 4 columns

💡 Hint

Nested rows reset the 12-column count inside their parent column.

The outer row divides into 8 and 4 columns. Inside the 8-column area, a nested row divides it into two equal halves (6 and 6) of that 8-column space. So A and B share the left side equally, and C is on the right side.

❓ accessibility

advanced

Accessibility in Bootstrap Grid Layouts

Which practice improves accessibility when using Bootstrap's 12-column grid for layout?

A Use semantic HTML elements like <code>&lt;main&gt;</code> and <code>&lt;section&gt;</code> inside grid columns

B Use only <code>&lt;div&gt;</code> tags for all grid columns to keep structure simple

C Add <code>aria-hidden="true"</code> to all grid columns to reduce noise

D Avoid using labels or landmarks inside grid columns to prevent clutter

💡 Hint

Think about how screen readers understand page structure.

Using semantic elements like <main> and <section> helps screen readers and assistive technologies understand the page layout better. Options A, B, and D reduce accessibility.

❓ selector

expert

CSS Selector for Targeting Specific Bootstrap Columns

Given this HTML:

<div class="row">
  <div class="col-4 special">One</div>
  <div class="col-4">Two</div>
  <div class="col-4 special">Three</div>
</div>

Which CSS selector will style only the columns with class special inside a Bootstrap row?

A .special .row

B .row > .special

C .row .col-4

D .col-4.special > .row

💡 Hint

Look for direct children with the special class inside the row.

The selector .row > .special targets elements with class special that are direct children of elements with class row. This matches the two columns with special class. Other options either select wrong elements or no elements.