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.