Masonry-style grid with columns in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ layout

intermediate

What is the output of this Bootstrap masonry grid code?

Given the following Bootstrap 5 code snippet, what will the visual layout look like in a modern browser?

Bootsrap

<div class="row row-cols-3 g-3" style="display: block; column-count: 3;">
  <div class="col">Item 1</div>
  <div class="col">Item 2</div>
  <div class="col">Item 3</div>
  <div class="col">Item 4</div>
  <div class="col">Item 5</div>
  <div class="col">Item 6</div>
</div>

A Three columns with items stacked vertically in each column, creating a masonry effect with uneven column heights.

B A grid with two columns only, items stacked vertically with equal height columns.

C Three columns with items evenly spaced so all columns have the same height and items aligned horizontally.

D A single row with six items evenly spaced horizontally in one line.

💡 Hint

Think about how CSS column-count affects layout and how Bootstrap's row-cols class works together.

The CSS property column-count: 3 creates three columns where content flows vertically, stacking items unevenly to create a masonry effect. Bootstrap's row-cols-3 sets the grid to three columns but does not override the column-count behavior. So items stack vertically in each column, producing uneven column heights typical of masonry layouts.

❓ selector

intermediate

Which CSS selector correctly targets all masonry grid items inside a Bootstrap column?

You want to style all items inside a Bootstrap masonry grid that uses row-cols-4 and col classes. Which selector will select all grid items correctly?

A .row-cols-4 > .col

B .row-cols-4 .col-item

C .col > .row-cols-4

D .col.row-cols-4

💡 Hint

Remember that Bootstrap places the col elements directly inside the row container.

In Bootstrap, the row-cols-4 class is applied to the row container, and the direct children with class col are the grid items. The selector .row-cols-4 > .col selects all direct children with class col inside the row with row-cols-4.

🧠 Conceptual

advanced

Why does using column-count with Bootstrap's grid create a masonry effect?

Explain why combining CSS column-count with Bootstrap's grid classes results in a masonry-style layout rather than a uniform grid.

A Because <code>column-count</code> forces all items to have the same height, creating uniform rows.

B Because Bootstrap's grid disables vertical stacking, forcing items to align horizontally only.

C Because <code>column-count</code> arranges content vertically into columns, allowing items of different heights to stack unevenly, while Bootstrap grid arranges items horizontally.

D Because Bootstrap's grid automatically applies <code>column-count</code> to create masonry layouts.

💡 Hint

Think about how content flows inside columns versus rows.

CSS column-count splits content vertically into columns, so items flow top to bottom in each column, stacking unevenly if their heights differ. Bootstrap's grid arranges items horizontally in rows. Combining them causes the vertical stacking from column-count to create the masonry effect.

📝 Syntax

advanced

What error occurs with this Bootstrap masonry grid CSS?

Consider this CSS snippet used with a Bootstrap grid: .row { column-count: 3 column-gap: 1rem; } What error will this cause?

Bootsrap

.row {
  column-count: 3
  column-gap: 1rem;
}

A No error, CSS will apply correctly

B SyntaxError due to missing semicolon after 'column-count: 3'

C Runtime error in browser console

D Bootstrap grid will ignore the CSS completely

💡 Hint

Check CSS syntax carefully for missing punctuation.

CSS requires semicolons to separate declarations. Missing the semicolon after 'column-count: 3' causes a syntax error, so the browser ignores that rule and may ignore the next one too.

❓ accessibility

expert

How to improve accessibility for a Bootstrap masonry grid with many items?

You have a Bootstrap masonry grid with many cards containing images and text. What is the best way to improve accessibility for screen reader users?

A Use only decorative images without alt text and no labels on cards.

B Remove all text from cards and rely on images only.

C Add <code>tabindex="-1"</code> to all cards to prevent keyboard focus.

D Add <code>aria-label</code> to each card describing its content and ensure images have meaningful <code>alt</code> text.

💡 Hint

Think about how screen readers understand content and navigation.

Adding descriptive aria-label attributes helps screen readers understand each card's purpose. Meaningful alt text on images ensures users who cannot see images get the content description. Avoid removing text or disabling keyboard focus as that harms accessibility.

Practice

1. What does the Bootstrap class row-cols-3 do in a masonry-style grid?

easy

A. It sets the grid to have 3 rows and 3 columns.

B. It creates a grid with 3 equal-width columns in a row.

C. It adds 3 rows to the grid.

D. It makes each item span 3 columns.

Solution

1. Step 1: Understand the row-cols-* class

   The row-cols-3 class in Bootstrap sets the number of columns per row to 3, making each column take equal width.

2. Step 2: Apply to masonry-style grid

   In a masonry grid, this means items will be arranged in 3 columns, adjusting height but keeping column count fixed.

3. Final Answer:

   It creates a grid with 3 equal-width columns in a row. -> Option B

4. Quick Check:

   row-cols-3 means 3 columns [OK]

Hint: Remember row-cols sets number of columns per row [OK]

Common Mistakes:

• Confusing rows with columns
• Thinking it sets total grid items
• Assuming it controls item height

2. Which of the following is the correct Bootstrap syntax to create a responsive masonry grid with 4 columns on large screens and 2 columns on small screens?

easy

A. <div class='row row-cols-4 row-cols-sm-2'>

B. <div class='row row-cols-lg-4 row-cols-sm-2'>

C. <div class='row row-cols-2 row-cols-lg-4'>

D. <div class='row row-cols-4 row-cols-lg-2'>

Solution

1. Step 1: Understand responsive classes order

   Bootstrap applies classes from smallest to largest breakpoint. So row-cols-2 sets default columns, and row-cols-lg-4 overrides on large screens.

2. Step 2: Check syntax correctness

   <div class='row row-cols-2 row-cols-lg-4'> uses row-cols-2 for small/default and row-cols-lg-4 for large screens, which is correct syntax.

3. Final Answer:

   <div class='row row-cols-2 row-cols-lg-4'> -> Option C

4. Quick Check:

   Default small cols then large override = <div class='row row-cols-2 row-cols-lg-4'> [OK]

Hint: Place smaller breakpoint class before larger breakpoint class [OK]

Common Mistakes:

• Using non-existent classes like row-cols-sm-2 without default
• Reversing breakpoint order
• Mixing up class names

3. Given this Bootstrap markup:

<div class='row row-cols-3 g-3'>
  <div class='col'><div class='card'>Short</div></div>
  <div class='col'><div class='card'>A bit taller content</div></div>
  <div class='col'><div class='card'>Tallest card content here</div></div>
</div>

What will the visual layout look like in the browser?

medium

A. Cards overlapping because of different heights.

B. Three cards stacked vertically in one column.

C. Cards arranged in two columns with uneven widths.

D. Three cards side by side in equal-width columns with different heights stacked evenly.

Solution

1. Step 1: Analyze row-cols-3 and g-3

   The row-cols-3 class creates 3 equal columns. The g-3 adds consistent gaps between columns and rows.

2. Step 2: Understand card heights in masonry

   Cards have different heights but Bootstrap arranges them side by side in columns with gaps, so they do not overlap but appear stacked neatly.

3. Final Answer:

   Three cards side by side in equal-width columns with different heights stacked evenly. -> Option D

4. Quick Check:

   row-cols-3 + g-3 = 3 columns with gaps [OK]

Hint: row-cols sets columns; g-* sets gaps for neat spacing [OK]

Common Mistakes:

• Assuming cards stack vertically by default
• Thinking cards overlap with different heights
• Confusing gaps with padding inside cards

4. You wrote this Bootstrap grid:

<div class='row row-cols-4'>
  <div class='col'>Item 1</div>
  <div class='col'>Item 2</div>
  <div class='col'>Item 3</div>
</div>

But the items appear stretched and not aligned in columns as expected. What is the likely cause?

medium

A. Not enough col items to fill 4 columns causes layout issues.

B. Missing the g-* class to add gaps between columns.

C. The row-cols-4 class only works with cards, not plain divs.

D. The col class must be replaced with col-4 for columns.

Solution

1. Step 1: Check number of columns vs items

   The row-cols-4 expects 4 columns per row. Here only 3 items exist, so the last column is empty, causing stretching or alignment issues.

2. Step 2: Understand Bootstrap behavior with fewer items

   Bootstrap fills columns evenly, but with fewer items than columns, the layout may look uneven or stretched.

3. Final Answer:

   Not enough col items to fill 4 columns causes layout issues. -> Option A

4. Quick Check:

   Items less than columns can cause layout stretch [OK]

Hint: Match number of items to columns for balanced layout [OK]

Common Mistakes:

• Assuming gaps fix alignment issues
• Thinking row-cols-4 only works with cards
• Replacing col with fixed width classes unnecessarily

5. You want to create a masonry-style grid using Bootstrap that adapts to screen size: 1 column on extra small, 2 columns on small, 3 columns on medium, and 4 columns on large screens. Which is the best class combination to achieve this?

hard

A. row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4

B. row row-cols-lg-4 row-cols-md-3 row-cols-sm-2 row-cols-1

C. row row-cols-4 row-cols-3 row-cols-2 row-cols-1

D. row row-cols-1 row-cols-2 row-cols-3 row-cols-4

Solution

1. Step 1: Understand Bootstrap responsive class order

   Bootstrap applies classes from smallest to largest breakpoint. So you start with row-cols-1 for extra small, then override with larger breakpoints.

2. Step 2: Verify class sequence for responsiveness

   row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 correctly lists classes from smallest to largest breakpoint: row-cols-1, row-cols-sm-2, row-cols-md-3, row-cols-lg-4.

3. Final Answer:

   row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 -> Option A

4. Quick Check:

   Responsive classes ordered smallest to largest = row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 [OK]

Hint: Order responsive classes from smallest to largest breakpoint [OK]

Common Mistakes:

• Reversing breakpoint order
• Using only one breakpoint class
• Omitting default column count