Card structure (header, body, footer) in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a card header using Bootstrap classes.

Bootsrap

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

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

Acard-text

Bcard-footer

Ccard-title

Dcard-header

Attempts:

3 left

💡 Hint

Common Mistakes

Using card-footer instead of card-header for the header.

Using card-title which is for titles inside the body.

The card-header class creates the header section of a Bootstrap card.

2fill in blank

medium

Complete the code to add a card footer using Bootstrap classes.

Bootsrap

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

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

Acard-footer

Bcard-body

Ccard-header

Dcard-title

Attempts:

3 left

💡 Hint

Common Mistakes

Using card-header instead of card-footer for the footer.

Placing the footer inside the card body.

The card-footer class adds a footer section at the bottom of the card.

3fill in blank

hard

Fix the error in the card body class to properly style the card content.

Bootsrap

<div class="card">
  <div class="card-header">Header</div>
  <div class="[1]">This is the card body content.</div>
  <div class="card-footer">Footer</div>
</div>

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

Acard-body

Bcard-footer

Ccard-header

Dcard-content

Attempts:

3 left

💡 Hint

Common Mistakes

Using card-footer or card-header for the body content.

Using a non-existent class like card-content.

The card-body class is used to style the main content area of a Bootstrap card.

4fill in blank

hard

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

Bootsrap

<div class="card">
  <div class="[1]">My Header</div>
  <div class="card-body">Content here.</div>
  <div class="[2]">My Footer</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

Mixing up header and footer classes.

Using card-body for header or footer.

The card-header class styles the header, and card-footer styles the footer of the card.

5fill in blank

hard

Fill all three blanks to create a complete Bootstrap card with header, body, and footer.

Bootsrap

<div class="card">
  <div class="[1]">Card Header</div>
  <div class="[2]">This is the card body.</div>
  <div class="[3]">Card Footer</div>
</div>

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

Acard-title

Bcard-body

Ccard-footer

Dcard-header

Attempts:

3 left

💡 Hint

Common Mistakes

Using card-title instead of card-header for the header.

Mixing up the order of classes.

Use card-header for the header, card-body for the main content, and card-footer for the footer.