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.

Practice

1. In Bootstrap's 12-column grid system, how many columns can you combine in a single row without breaking the layout?

easy

A. Only 3 columns maximum

B. Exactly 6 columns only

C. Up to 12 columns combined

D. Any number of columns without limit

Solution

1. Step 1: Understand the 12-column grid concept

   The grid divides the page width into 12 equal parts, so columns in a row must add up to 12 or less.

2. Step 2: Apply the rule to column combinations

   You can combine columns as long as their total width does not exceed 12, ensuring the layout fits perfectly.

3. Final Answer:

   Up to 12 columns combined -> Option C

4. Quick Check:

   Sum of columns ≤ 12 = Up to 12 columns combined [OK]

Hint: Remember total columns per row must be 12 or less [OK]

Common Mistakes:

• Thinking you can use more than 12 columns in one row
• Assuming exactly 6 columns are required
• Believing any number of columns works

2. Which of the following is the correct Bootstrap class to create a column that spans 4 out of 12 columns?

easy

A. col-6

B. col-12

C. col-8

D. col-4

Solution

1. Step 1: Identify the class for column width

   Bootstrap uses classes like col-4 to specify a column that spans 4 of the 12 grid columns.

2. Step 2: Match the class to the required width

   Since we want 4 columns wide, col-4 is the correct class.

3. Final Answer:

   col-4 -> Option D

4. Quick Check:

   Class for 4 columns = col-4 [OK]

Hint: Class name matches number of columns (col-4 for 4 columns) [OK]

Common Mistakes:

• Using col-12 which spans full width
• Choosing col-8 or col-6 which are wider than 4 columns
• Confusing col-4 with col-14 (invalid)

3. What will be the layout result of this Bootstrap row?

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

medium

A. Three columns in one row with widths 3, 6, and 3

B. Two rows because columns exceed 12

C. One column spanning full width

D. Columns stacked vertically

Solution

1. Step 1: Calculate total column width in the row

   Sum of columns: 3 + 6 + 3 = 12, which fits exactly in one row.

2. Step 2: Understand Bootstrap layout behavior

   Since total is 12, all columns appear side by side in one row with widths proportional to 3, 6, and 3.

3. Final Answer:

   Three columns in one row with widths 3, 6, and 3 -> Option A

4. Quick Check:

   Total columns = 12 means one row layout [OK]

Hint: Add column numbers; if 12 or less, same row [OK]

Common Mistakes:

• Assuming columns exceed 12 and wrap to next row
• Thinking columns stack vertically by default
• Believing only one column shows

4. Identify the error in this Bootstrap grid code:

<div class="row">
  <div class="col-5">X</div>
  <div class="col-8">Y</div>
</div>

medium

A. Total columns exceed 12, causing layout break

B. Missing closing tag for row

C. Incorrect class names used

D. No error, layout is correct

Solution

1. Step 1: Add column widths to check total

   5 + 8 = 13, which is more than 12 allowed per row.

2. Step 2: Understand Bootstrap grid rules

   When total exceeds 12, columns wrap or break layout, causing unexpected results.

3. Final Answer:

   Total columns exceed 12, causing layout break -> Option A

4. Quick Check:

   Sum > 12 means layout error [OK]

Hint: Sum columns; if over 12, layout breaks [OK]

Common Mistakes:

• Ignoring total column width sum
• Thinking 5 and 8 fit in one row
• Assuming class names are wrong

5. You want to create a responsive layout with three columns: first takes 3 columns on small screens and 6 on medium, second takes 6 on small and 3 on medium, third takes 3 on small and 3 on medium. Which Bootstrap classes correctly achieve this?

hard

A. col-md-3 col-sm-6, col-md-6 col-sm-3, col-md-3 col-sm-3

B. col-sm-3 col-md-6, col-sm-6 col-md-3, col-sm-3 col-md-3

C. col-3 col-6, col-6 col-3, col-3 col-3

D. col-sm-6 col-md-3, col-sm-3 col-md-6, col-sm-3 col-md-3

Solution

1. Step 1: Match small screen classes

   First column: 3 columns on small = col-sm-3, second: 6 columns = col-sm-6, third: 3 columns = col-sm-3.

2. Step 2: Match medium screen classes

   First column: 6 columns on medium = col-md-6, second: 3 columns = col-md-3, third: 3 columns = col-md-3.

3. Step 3: Verify option matches all classes

   col-sm-3 col-md-6, col-sm-6 col-md-3, col-sm-3 col-md-3 matches all these class assignments correctly.

4. Final Answer:

   col-sm-3 col-md-6, col-sm-6 col-md-3, col-sm-3 col-md-3 -> Option B

5. Quick Check:

   Responsive classes match screen sizes [OK]

Hint: Use col-sm-* for small, col-md-* for medium screens [OK]

Common Mistakes:

• Mixing up small and medium class prefixes
• Using col-* without breakpoint for responsiveness
• Swapping column sizes between breakpoints