Masonry-style grid with columns in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a Bootstrap container for the masonry grid.

Bootsrap

<div class="[1]">
  <!-- Masonry grid content here -->
</div>

Drag options to blanks, or click blank then click option'

Acol

Brow

Cmasonry

Dcontainer

Attempts:

3 left

💡 Hint

Common Mistakes

Using row instead of container for the main wrapper.

Using col which is for columns, not the container.

The container class creates a responsive fixed-width container in Bootstrap, which is the base for the masonry grid layout.

2fill in blank

medium

Complete the code to create a Bootstrap row that will hold the masonry columns.

Bootsrap

<div class="container">
  <div class="[1]">
    <!-- Columns go here -->
  </div>
</div>

Drag options to blanks, or click blank then click option'

Arow

Bgrid

Cmasonry

Dcontainer

Attempts:

3 left

💡 Hint

Common Mistakes

Using container again inside the container.

Using grid which is not a Bootstrap class.

The row class in Bootstrap is used to create a horizontal group of columns inside a container.

3fill in blank

hard

Fix the error in the column class to make it responsive and suitable for masonry layout.

Bootsrap

<div class="container">
  <div class="row">
    <div class="col-[1]">
      <!-- Item 1 -->
    </div>
  </div>
</div>

Drag options to blanks, or click blank then click option'

A3

B6

C4

D12

Attempts:

3 left

💡 Hint

Common Mistakes

Using col-12 which makes the column full width.

Using col-3 which creates 4 columns per row.

The class col-4 creates a column that takes 4 parts of the 12-grid system, allowing 3 columns per row, which is common for masonry layouts.

4fill in blank

hard

Fill both blanks to add Bootstrap classes for spacing and enable masonry layout.

Bootsrap

<div class="container">
  <div class="row [1]" style="column-count: [2]; column-gap: 1rem;">
    <!-- Masonry items -->
  </div>
</div>

Drag options to blanks, or click blank then click option'

Ag-3

Bg-0

C4

D3

Attempts:

3 left

💡 Hint

Common Mistakes

Using g-0 which removes spacing.

Setting column-count to 4 which changes the layout.

The class g-3 adds gutters (spacing) between columns. The style column-count: 3; sets the number of columns for the masonry effect.

5fill in blank

hard

Fill all three blanks to complete the masonry item with responsive column classes and margin.

Bootsrap

<div class="container">
  <div class="row g-3" style="column-count: 3; column-gap: 1rem;">
    <div class="col-[1] col-md-[2] [3]">
      <div class="card">
        <div class="card-body">
          Masonry item content
        </div>
      </div>
    </div>
  </div>
</div>

Drag options to blanks, or click blank then click option'

A12

B6

Cmb-3

Dmt-3

Attempts:

3 left

💡 Hint

Common Mistakes

Using mt-3 instead of mb-3 which adds margin on top.

Using wrong column sizes that break responsiveness.

col-12 makes the item full width on small screens, col-md-6 makes it half width on medium screens, and mb-3 adds margin below the item for spacing.

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