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.