Card groups and decks in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

What is the visual output of this Bootstrap card group code?

Given the following HTML code using Bootstrap 4, what will the cards look like when rendered in a modern browser?

<div class="card-group">
  <div class="card">
    <img src="img1.jpg" class="card-img-top" alt="Image 1">
    <div class="card-body">
      <h5 class="card-title">Card 1</h5>
      <p class="card-text">Text 1</p>
    </div>
  </div>
  <div class="card">
    <img src="img2.jpg" class="card-img-top" alt="Image 2">
    <div class="card-body">
      <h5 class="card-title">Card 2</h5>
      <p class="card-text">Text 2</p>
    </div>
  </div>
  <div class="card">
    <img src="img3.jpg" class="card-img-top" alt="Image 3">
    <div class="card-body">
      <h5 class="card-title">Card 3</h5>
      <p class="card-text">Text 3</p>
    </div>
  </div>
</div>

Bootsrap

<div class="card-group">
  <div class="card">
    <img src="img1.jpg" class="card-img-top" alt="Image 1">
    <div class="card-body">
      <h5 class="card-title">Card 1</h5>
      <p class="card-text">Text 1</p>
    </div>
  </div>
  <div class="card">
    <img src="img2.jpg" class="card-img-top" alt="Image 2">
    <div class="card-body">
      <h5 class="card-title">Card 2</h5>
      <p class="card-text">Text 2</p>
    </div>
  </div>
  <div class="card">
    <img src="img3.jpg" class="card-img-top" alt="Image 3">
    <div class="card-body">
      <h5 class="card-title">Card 3</h5>
      <p class="card-text">Text 3</p>
    </div>
  </div>
</div>

A A single card with three images stacked inside it vertically.

B Three cards stacked vertically with images stretched to full width.

C Three cards displayed side by side with equal height and their images aligned horizontally.

D Three cards displayed side by side but with different heights and images not aligned.

💡 Hint

Think about how Bootstrap's card-group arranges cards in a row with equal height.

Bootstrap's card-group arranges cards side by side in a horizontal row. It ensures all cards have equal height and aligns images at the top horizontally. This creates a neat, uniform look for multiple cards.

🧠 Conceptual

intermediate

Which Bootstrap class creates a deck of cards with equal width and spacing?

You want to create a set of cards that automatically adjust their width to fill the container evenly with consistent spacing. Which Bootstrap class should you use?

A card-deck

B card-group

C card-columns

D card-container

💡 Hint

This class was designed to create equal width cards with spacing between them.

The card-deck class arranges cards with equal width and spacing, making them look like a deck of cards. card-group aligns cards side by side but does not add spacing. card-columns creates a Pinterest-like masonry layout. card-container is not a Bootstrap class.

❓ selector

advanced

Which CSS selector targets only the card titles inside a Bootstrap card deck?

Given a Bootstrap card deck with multiple cards, which CSS selector will style only the card titles inside the deck?

Bootsrap

<div class="card-deck">
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Title 1</h5>
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Title 2</h5>
    </div>
  </div>
</div>

A .card .card-title

B .card-deck > .card-title

C .card-body > .card-title

D .card-deck .card-title

💡 Hint

Think about selecting elements inside the card deck container.

The selector '.card-deck .card-title' selects all elements with class 'card-title' inside any descendant of '.card-deck'. This correctly targets all card titles inside the deck. Option D selects card titles inside any card anywhere, not limited to the deck. Option D looks for direct children with class 'card-title' which do not exist. Option D selects card titles inside any card-body, regardless of deck.

❓ layout

advanced

What happens if you put cards inside a Bootstrap card-columns container?

You use the following code:

<div class="card-columns">
  <div class="card">Card 1 content</div>
  <div class="card">Card 2 content</div>
  <div class="card">Card 3 content</div>
</div>

How will the cards be arranged visually?

Bootsrap

<div class="card-columns">
  <div class="card">Card 1 content</div>
  <div class="card">Card 2 content</div>
  <div class="card">Card 3 content</div>
</div>

A Cards are arranged in a masonry-like column layout with varying heights.

B Cards are arranged side by side with equal width and height.

C Cards are stacked vertically with no spacing.

D Cards overlap each other with images hidden.

💡 Hint

This container creates a Pinterest-style layout.

The card-columns class arranges cards in a masonry-like column layout where cards flow vertically in columns with varying heights. This creates a staggered effect similar to Pinterest. It is different from card-group or card-deck which arrange cards horizontally.

❓ accessibility

expert

Which ARIA attribute improves accessibility for a Bootstrap card group?

You want to make a Bootstrap card group more accessible for screen readers. Which ARIA attribute is best to add to the card group container?

Bootsrap

<div class="card-group">
  <!-- multiple cards here -->
</div>

A role="list"

B aria-label="Group of related cards"

C aria-hidden="true"

D role="presentation"

💡 Hint

Think about describing the group meaningfully to assistive technologies.

Adding aria-label with a descriptive text like 'Group of related cards' helps screen readers understand the purpose of the card group. role="list" is not appropriate because cards are not list items. aria-hidden="true" hides content from screen readers, which is not desired. role="presentation" removes semantic meaning, which reduces accessibility.

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