Masonry-style grid with columns in Bootsrap - Mini Project: Build & Apply

Masonry-style Grid with Columns using Bootstrap

📖 Scenario: You are building a photo gallery webpage. You want to display photos in a neat masonry-style grid where images stack vertically in columns, adjusting nicely on different screen sizes.

🎯 Goal: Create a responsive masonry-style grid using Bootstrap columns that arranges images in vertical columns with gaps. The grid should adapt to screen size changes.

📋 What You'll Learn

Use Bootstrap 5 classes for layout

Create a container with rows and columns

Use the Bootstrap grid system to create 3 columns on large screens

Place images inside columns stacked vertically

Add spacing between images and columns

Make the grid responsive for smaller screens

💡 Why This Matters

🌍 Real World

Masonry grids are popular for photo galleries, portfolios, and product showcases on websites. They help display images neatly in columns that adjust to screen size.

💼 Career

Knowing how to build responsive grids with Bootstrap is a key skill for front-end web developers working on modern, mobile-friendly websites.

1

Create the HTML skeleton with Bootstrap container and rows

Write the basic HTML structure with <!DOCTYPE html>, <html lang="en">, <head> including <meta charset="UTF-8">, <meta name="viewport" content="width=device-width, initial-scale=1">, and link to Bootstrap 5 CSS from CDN. Then add a <body> with a <div> container with class container and inside it a <div> with class row. Close all tags properly.

Bootsrap

Hint

Remember to include the Bootstrap CSS link inside the <head> section for styling.

2

Add three Bootstrap columns inside the row

Inside the <div class="row">, add three <div> elements each with the class col-lg-4 to create three equal columns on large screens. These columns will hold the images stacked vertically.

Bootsrap

  
  
  
  Masonry Grid


  
    
      
    
  

Hint

Use three <div> elements with the class col-lg-4 inside the row.

3

Add images stacked vertically inside each column

Inside each <div class="col-lg-4">, add two <img> tags with src attributes set to https://via.placeholder.com/300x200?text=Image+1, https://via.placeholder.com/300x250?text=Image+2, https://via.placeholder.com/300x180?text=Image+3, https://via.placeholder.com/300x220?text=Image+4, https://via.placeholder.com/300x210?text=Image+5, and https://via.placeholder.com/300x230?text=Image+6 respectively, so that each column has two images stacked vertically. Add the class img-fluid to each image for responsiveness.

Bootsrap

  
  
  
  Masonry Grid


  
    
      
        
      
      
        
      
      
        
      
    
  

Hint

Use the img-fluid class for responsive images and mb-3 class to add vertical spacing between images.

4

Add spacing between columns and make grid responsive

Add the Bootstrap class g-3 to the <div class="row"> to add gutters (spacing) between columns and rows. Also, add the class col-md-6 alongside col-lg-4 on each column <div> so that on medium screens there are two columns, and on large screens three columns.

Bootsrap

  
  
  
  Masonry Grid


  
    
      
        
      
      
        
      
      
        
      
    
  

Hint

Add the g-3 class to the row for spacing and add col-md-6 to columns for medium screen responsiveness.

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