Masonry-style grid with columns in Bootsrap - Browser Rendering Trace

Render Flow - Masonry-style grid with columns

Read HTML container with column classes

↓

Create column containers

↓

Place grid items inside columns

↓

Browser calculates column widths

↓

Items stack vertically inside columns

↓

Render columns side by side

↓

Paint final masonry layout

The browser reads the container with Bootstrap column classes, creates vertical columns, stacks items inside each column vertically, and arranges columns side by side to create a masonry effect.

Render Steps - 3 Steps

Code Added:<div class="container"><div class="row"></div></div>

Before

[Empty page]

→

After

[Container box]
  [Row box inside container]

Adding the container and row creates a horizontal row area where columns will be placed side by side.

🔧 Browser Action:Creates container and row boxes, triggers layout calculation

Code Sample

This code creates three vertical columns using Bootstrap's grid. Items stack vertically inside each column, forming a masonry-style layout with uneven item heights.

Bootsrap

<div class="container">
  <div class="row">
    <div class="col">
      <div class="item">Item 1</div>
      <div class="item">Item 4</div>
    </div>
    <div class="col">
      <div class="item">Item 2</div>
      <div class="item">Item 5</div>
    </div>
    <div class="col">
      <div class="item">Item 3</div>
      <div class="item">Item 6</div>
    </div>
  </div>
</div>

Bootsrap

.item {
  background-color: #a0c4ff;
  margin-bottom: 1rem;
  padding: 1rem;
  border-radius: 0.5rem;
  color: #1d3557;
  font-weight: bold;
}

Render Quiz - 3 Questions

After step 2, how are the columns arranged visually?

A One column with all items stacked

B Three vertical columns side by side horizontally

C Three rows stacked vertically

D Items arranged randomly

Common Confusions - 3 Topics

Why do items stack vertically inside columns instead of horizontally?

Because items inside Bootstrap columns are block-level elements (display: block) by default, they stack vertically, creating the masonry effect.

💡 Inside columns, items stack top to bottom, columns sit side by side left to right.

Why don't the columns have equal height?

Columns height depends on the total height of stacked items inside them, so they can be uneven, which is the masonry style.

💡 Column height = sum of item heights inside it.

Why does adding margin-bottom create space only between items vertically?

Margin-bottom adds space below each item, so items inside a column have vertical gaps but columns remain side by side without horizontal gaps.

💡 Vertical margin creates vertical spacing inside columns.

Property Reference

Property	Value Applied	Axis/Direction	Visual Effect	Common Use
display	flex (row)	horizontal	Aligns columns side by side	Bootstrap .row
display	block (default)	vertical	Stacks items vertically inside columns	Bootstrap .col
margin-bottom	1rem	vertical spacing	Adds space between stacked items	Spacing between masonry items
width	auto or %	horizontal	Sets column width evenly	Bootstrap grid columns

Concept Snapshot

Masonry-style grid uses Bootstrap columns stacked vertically. Columns sit side by side horizontally inside a row. Items inside columns stack vertically by default. Use margin-bottom on items for vertical spacing. Column heights vary based on item heights, creating masonry effect.

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