Why cards organize content in Bootsrap - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a Bootstrap card container.

Bootsrap

<div class="[1]">
  <div class="card">
    <div class="card-body">
      This is a card.
    </div>
  </div>
</div>

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

Arow

Bcard-group

Ccontainer

Dcard-deck

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'row' instead of 'container' causes layout issues.

Using 'card-group' or 'card-deck' without a container can break responsiveness.

The container class creates a responsive fixed width container for the card.

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>
    <p class="card-text">Some quick example text.</p>
  </div>
</div>

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

Acard-title

Bcard-footer

Ccard-subtitle

Dcard-header

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'card-header' inside card-body is incorrect.

Using 'card-footer' or 'card-subtitle' changes the style and meaning.

The card-title class styles the heading as the card's title.

3fill in blank

hard

Fix the error in the card image code by completing the class name.

Bootsrap

<div class="card" style="width: 18rem;">
  <img src="image.jpg" class="[1]" alt="Card image">
  <div class="card-body">
    <p class="card-text">Image above the text.</p>
  </div>
</div>

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

Acard-img-top

Bcard-image

Cimg-top

Dcard-img

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'card-image' or 'img-top' are not valid Bootstrap classes.

Using 'card-img' alone does not position the image correctly.

The card-img-top class places the image at the top of the card with correct styling.

4fill in blank

hard

Fill both blanks to create a card with a header and footer.

Bootsrap

<div class="card">
  <div class="[1]">Featured</div>
  <div class="card-body">
    <p class="card-text">Content inside the card body.</p>
  </div>
  <div class="[2]">Footer text</div>
</div>

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

Acard-header

Bcard-body

Ccard-footer

Dcard-title

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'card-body' for header or footer is incorrect.

Mixing up 'card-title' with header or footer classes.

The card-header class creates a header section, and card-footer creates a footer section in the card.

5fill in blank

hard

Fill all three blanks to create a card with an image, title, and button.

Bootsrap

<div class="card" style="width: 18rem;">
  <img src="pic.jpg" class="[1]" alt="Card image">
  <div class="card-body">
    <h5 class="[2]">Card Title</h5>
    <a href="#" class="btn [3]">Go somewhere</a>
  </div>
</div>

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

Acard-img-top

Bcard-title

Cbtn-primary

Dbtn-secondary

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'btn-secondary' instead of 'btn-primary' changes button color.

Using 'card-img' instead of 'card-img-top' changes image placement.

The image uses card-img-top, the title uses card-title, and the button uses btn-primary for a blue styled button.