Card groups and decks in Bootsrap - Mini Project: Build & Apply

Create a Responsive Card Group with Bootstrap

📖 Scenario: You are building a simple webpage to showcase three products using Bootstrap cards. You want these cards to appear side by side on larger screens and stack nicely on smaller screens.

🎯 Goal: Build a responsive card group using Bootstrap 5 that displays three cards with images, titles, and text. The cards should be grouped so they share the same height and spacing.

📋 What You'll Learn

Use Bootstrap 5 CSS from CDN

Create a card group container with exactly three cards inside

Each card must have an image, a card title, and card text

Use semantic HTML5 elements

Ensure the layout is responsive and accessible

💡 Why This Matters

🌍 Real World

Card groups are commonly used on websites to display products, services, or articles in a clean, organized way that adapts to different screen sizes.

💼 Career

Knowing how to use Bootstrap card groups helps you quickly build professional, responsive UI components that are accessible and visually appealing, a key skill for front-end web developers.

1

Set up the basic HTML structure with Bootstrap CSS

Create a basic HTML5 page with lang="en" and include the Bootstrap 5 CSS CDN link inside the <head>. Add a <main> element with a class="container my-4" inside the <body>. Do not add any cards yet.

Bootsrap

    
    
    Product Cards
    


    
        
    

Hint

Remember to add the Bootstrap CSS link inside the <head> and create a <main> container with margin.

2

Add a Bootstrap card group container inside the main container

Inside the existing <main class="container my-4">, add a <div> with the class card-group. This will hold the cards you will add next.

Bootsrap

    
    
    Product Cards
    


    
        
    

Hint

Use a <div> with the class card-group inside the main container.

3

Add three Bootstrap cards inside the card group

Inside the <div class="card-group">, add exactly three <div> elements with the class card. Each card must contain:

• An <img> with class="card-img-top" and alt text
• A <div> with class card-body containing a <h5> with class card-title and a <p> with class card-text

Use these exact details for each card:

Card 1: Image src="https://via.placeholder.com/150", alt="Product 1 image", title="Product 1", text="This is the first product."
Card 2: Image src="https://via.placeholder.com/150", alt="Product 2 image", title="Product 2", text="This is the second product."
Card 3: Image src="https://via.placeholder.com/150", alt="Product 3 image", title="Product 3", text="This is the third product."

Bootsrap

    
    
    Product Cards
    


    
        
            
        
    

Hint

Each card needs an image with card-img-top, a card-body with a title and text. Use the exact image URLs and text provided.

4

Add accessibility and responsive improvements

Add alt attributes to all images (already done). Add aria-label="Product cards group" to the <div class="card-group"> for accessibility. Also, add a <header> inside <main> with an <h1> titled "Our Products" above the card group.

Bootsrap

    
    
    Product Cards
    


    
        
        
            
        
    

Hint

Wrap the card group with a header containing an h1. Add aria-label="Product cards group" to the card group div.

Practice

1. What is the main purpose of using .card-group in Bootstrap?

easy

A. To add shadows to cards

B. To add space between cards with equal margins

C. To create a carousel of cards

D. To make all cards the same height and visually connected

Solution

1. Step 1: Understand .card-group behavior

   The .card-group class groups cards so they share the same height and appear connected without gaps.

2. Step 2: Compare with other classes

   .card-deck spaces cards evenly with margins, not connecting them tightly.

3. Final Answer:

   To make all cards the same height and visually connected -> Option D

4. Quick Check:

   .card-group = same height + connected cards [OK]

Hint: Remember: group = connected and equal height cards [OK]

Common Mistakes:

• Confusing card-group with card-deck spacing
• Thinking card-group adds margins between cards
• Assuming card-group creates a carousel

2. Which of the following is the correct syntax to create a card deck in Bootstrap?

easy

A. <div class='card-group'> ... </div>

B. <div class='deck-cards'> ... </div>

C. <div class='card-deck'> ... </div>

D. <div class='card-container'> ... </div>

Solution

1. Step 1: Identify Bootstrap class for card decks

   The correct Bootstrap class for card decks is card-deck, which spaces cards evenly.

2. Step 2: Check other options

   card-group is for connected cards, and the other classes are not valid Bootstrap classes.

3. Final Answer:

   <div class='card-deck'> ... </div> -> Option C

4. Quick Check:

   Card deck syntax = card-deck [OK]

Hint: Deck = spaced cards, use class 'card-deck' [OK]

Common Mistakes:

• Using 'card-group' instead of 'card-deck' for spacing
• Inventing non-existent classes like 'card-container'
• Misspelling class names

3. What will be the visual difference when using .card-group versus .card-deck for three cards side by side?

medium

A. Both have equal height and no gaps

B. Cards in .card-group have equal height and no gaps; .card-deck cards have gaps and equal spacing

C. Cards in .card-group have gaps; .card-deck cards overlap

D. Both have gaps but different background colors

Solution

1. Step 1: Understand .card-group layout

   .card-group makes cards the same height and connects them visually without gaps.

2. Step 2: Understand .card-deck layout

   .card-deck spaces cards evenly with margins, creating gaps between cards.

3. Final Answer:

   Cards in .card-group have equal height and no gaps; .card-deck cards have gaps and equal spacing -> Option B

4. Quick Check:

   Group = connected; Deck = spaced [OK]

Hint: Group = no gaps; Deck = gaps between cards [OK]

Common Mistakes:

• Thinking card-deck removes gaps
• Assuming both have same spacing
• Confusing card-group with card-deck visually

4. You wrote this code but cards are not spaced evenly:

<div class='card-group'>
  <div class='card'>Card 1</div>
  <div class='card'>Card 2</div>
  <div class='card'>Card 3</div>
</div>

What is the issue?

medium

A. You should use card-deck instead of card-group for even spacing

B. You need to add row class to the container

C. Cards need col classes inside card-group

D. You forgot to add container class

Solution

1. Step 1: Identify the class used

   The code uses card-group, which connects cards without spacing.

2. Step 2: Choose correct class for spacing

   To space cards evenly with margins, card-deck should be used instead.

3. Final Answer:

   You should use card-deck instead of card-group for even spacing -> Option A

4. Quick Check:

   Spacing needs card-deck not card-group [OK]

Hint: Use card-deck for spacing, card-group for connected cards [OK]

Common Mistakes:

• Adding row or col classes unnecessarily
• Thinking container class controls card spacing
• Confusing card-group and card-deck roles

5. You want to display four cards in a row that all have the same height and are spaced evenly with margin between them. Which Bootstrap approach should you use?

hard

A. Use .card-deck to space cards evenly with margin and equal height

B. Use .card-group inside a .row with .col classes

C. Use .card-group alone without any grid classes

D. Use .card-columns for equal height and spacing

Solution

1. Step 1: Understand requirements

   You want cards with equal height and even spacing with margin between them.

2. Step 2: Match Bootstrap classes to needs

   .card-deck spaces cards evenly with margin and keeps them balanced in height.

3. Step 3: Evaluate other options

   .card-group connects cards without margin; .card-columns creates masonry layout, not equal height rows.

4. Final Answer:

   Use .card-deck to space cards evenly with margin and equal height -> Option A

5. Quick Check:

   Even spacing + equal height = card-deck [OK]

Hint: For spacing and equal height, pick card-deck [OK]

Common Mistakes:

• Using card-group expecting margin spacing
• Using card-columns which stacks cards unevenly
• Not combining with grid classes properly