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.

Practice

1. Which Bootstrap class is used to create the header section of a card?

easy

A. card-top

B. card-header

C. card-title

D. card-head

Solution

1. Step 1: Understand Bootstrap card parts

   Bootstrap cards have specific classes for each part: header, body, and footer.

2. Step 2: Identify the header class

   The class card-header is used to style the header section of a card.

3. Final Answer:

   card-header -> Option B

4. Quick Check:

   Header section class = card-header [OK]

Hint: Header always uses card-header class [OK]

Common Mistakes:

• Confusing card-title with header
• Using non-existent classes like card-top
• Mixing header with body or footer classes

2. Which is the correct HTML structure for a Bootstrap card body?

easy

A. <div class='card-body'>Content</div>

B. <section class='card-body'>Content</section>

C. <div class='card-content'>Content</div>

D. <body class='card'>Content</body>

Solution

1. Step 1: Identify the correct tag and class for card body

   Bootstrap uses a div with class card-body to hold the main content.

2. Step 2: Check the options for correct syntax

   <div class='card-body'>Content</div> uses <div class='card-body'>, which is the standard Bootstrap structure.

3. Final Answer:

   <div class='card-body'>Content</div> -> Option A

4. Quick Check:

   Card body uses div.card-body [OK]

Hint: Card body is always a div with class card-body [OK]

Common Mistakes:

• Using wrong tags like section or body
• Using incorrect class names like card-content
• Placing content outside the card body div

3. What will be the visual order of sections in this Bootstrap card HTML?

<div class='card'>
  <div class='card-footer'>Footer</div>
  <div class='card-header'>Header</div>
  <div class='card-body'>Body</div>
</div>

medium

A. Header, Body, Footer

B. Footer, Body, Header

C. Header, Footer, Body

D. Footer, Header, Body

Solution

1. Step 1: Understand Bootstrap card layout

   Bootstrap .card uses display: flex; flex-direction: column, so visual order matches HTML DOM order.

2. Step 2: Trace the HTML source order

   Footer div first, then header, then body. No CSS reordering occurs.

3. Step 3: Understand visual stacking

   Flex-direction: column stacks children vertically in source order, so footer appears at top, which is unusual.

4. Step 4: Bootstrap expects header first, then body, then footer for correct visual order

   Since the HTML places footer first, it will appear at top, which is not standard.

5. Final Answer:

   Footer, Header, Body -> Option D

6. Quick Check:

   Visual order = Footer, Header, Body [OK]

Hint: Bootstrap card sections display in DOM order visually [OK]

Common Mistakes:

• Assuming Bootstrap reorders to header-body-footer regardless of HTML
• Thinking CSS order properties override DOM order
• Ignoring flex-direction: column stacks in source order

4. Identify the error in this Bootstrap card snippet:

<div class='card'>
  <div class='card-header'>Title</div>
  <div class='card-body'>Content</div>
  <div class='card-footer'>Footer</div>
</div>

What is wrong?

medium

A. Missing card class on the container

B. Footer should come before body

C. No error; this is correct Bootstrap card structure

D. Header must be inside card-body

Solution

1. Step 1: Check container class

   The outer div has class card, which is correct.

2. Step 2: Verify card parts order and nesting

   Header, body, and footer are correctly placed as siblings inside the card container.

3. Final Answer:

   No error; this is correct Bootstrap card structure -> Option C

4. Quick Check:

   Proper card structure = No error [OK]

Hint: Card parts are siblings inside div.card [OK]

Common Mistakes:

• Thinking footer must come before body
• Placing header inside body incorrectly
• Forgetting the main card container class

5. You want a card with a header, body, and footer. The footer should have a button aligned to the right. Which Bootstrap classes help achieve this layout inside the footer?

hard

A. card-footer d-flex justify-content-end

B. card-footer text-center

C. card-footer align-items-start

D. card-footer float-right

Solution

1. Step 1: Use card-footer for footer section

   The footer must have the card-footer class to style it as a card footer.

2. Step 2: Align button right using Flexbox utilities

   Bootstrap's d-flex makes the footer a flex container, and justify-content-end pushes content to the right.

3. Final Answer:

   card-footer d-flex justify-content-end -> Option A

4. Quick Check:

   Right aligned footer button = d-flex justify-content-end [OK]

Hint: Use flex and justify-content-end to align right [OK]

Common Mistakes:

• Using deprecated float-right class
• Using text-center which centers content
• Using align-items-start which aligns vertically