0
0
Bootsrapmarkup~30 mins

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

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
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.
Progress0 / 4 steps
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
Need a 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
Need a 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
Need a 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
Need a hint?

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