Card groups and decks in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a Bootstrap card group container.

Bootsrap

<div class="[1]">
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Card 1</h5>
      <p class="card-text">This is the first card.</p>
    </div>
  </div>
</div>

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

Acard-group

Bcard-deck

Ccard-container

Dcard-wrapper

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'card-deck' which is deprecated in Bootstrap 5.

Using non-existent classes like 'card-container'.

The Bootstrap class for grouping cards side by side is 'card-group'.

2fill in blank

medium

Complete the code to add a card title inside the card body.

Bootsrap

<div class="card">
  <div class="card-body">
    <h5 class="[1]">Card Title</h5>
  </div>
</div>

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

Acard-title

Btitle-card

Ccard-header

Dcard-text

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'card-header' which is for the card header section.

Using 'card-text' which is for paragraph text.

The correct class for a card title is 'card-title'.

3fill in blank

hard

Fix the error in the code to properly create a card deck container.

Bootsrap

<div class="[1]">
  <div class="card">
    <div class="card-body">
      <p class="card-text">Card content here.</p>
    </div>
  </div>
</div>

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

Acard-columns

Bcard-deck

Ccard-wrapper

Dcard-group

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'card-deck' which is deprecated.

Using 'card-wrapper' which is not a Bootstrap class.

Using 'card-columns' which was removed in Bootstrap 5.

In Bootstrap 5, 'card-group' replaces the deprecated 'card-deck' for grouping cards side by side with equal height. 'card-columns' was removed.

4fill in blank

hard

Fill both blanks to create a responsive card group with three cards.

Bootsrap

<div class="[1]">
  <div class="card [2]">
    <div class="card-body">
      <h5 class="card-title">Card 1</h5>
      <p class="card-text">Content for card one.</p>
    </div>
  </div>
  <!-- Repeat cards here -->
</div>

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

Acard-group

Bcard-deck

Cmb-3

Dtext-center

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'card-deck' which is deprecated.

Not adding spacing between cards.

Use 'card-group' to group cards and 'mb-3' to add margin below each card for spacing.

5fill in blank

hard

Fill all three blanks to create a card with an image, title, and text inside a card group.

Bootsrap

<div class="[1]">
  <div class="card">
    <img src="image.jpg" class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="[2]">Card Title</h5>
      <p class="[3]">Some quick example text.</p>
    </div>
  </div>
</div>

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

Acard-group

Bcard-title

Ccard-text

Dcard-deck

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'card-deck' which is deprecated.

Mixing up 'card-title' and 'card-text' classes.

Use 'card-group' to group cards, 'card-title' for the title, and 'card-text' for the paragraph inside the card body.

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