Card structure (header, body, footer) in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

What will this Bootstrap card display?

Look at the Bootstrap card code below. What text will appear inside the card header?

Bootsrap

<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
  </div>
  <div class="card-footer text-muted">
    2 days ago
  </div>
</div>

A Featured

B 2 days ago

C Special title treatment

D With supporting text below as a natural lead-in to additional content.

💡 Hint

The card header text is inside the div with class 'card-header'.

The text inside the div with class 'card-header' is 'Featured'. This is the header section of the card.

🧠 Conceptual

intermediate

Which Bootstrap class defines the card footer?

In Bootstrap, which class should you use to create the footer section of a card?

A card-end

B card-body-footer

C footer-card

D card-footer

💡 Hint

Look for the class that starts with 'card-' and ends with 'footer'.

The correct class for the footer section of a Bootstrap card is 'card-footer'.

❓ selector

advanced

Which CSS selector targets only the card body text?

Given this HTML structure for a Bootstrap card, which CSS selector will select only the paragraph inside the card body?

Bootsrap

<div class="card">
  <div class="card-header">Header</div>
  <div class="card-body">
    <p class="card-text">Body text here</p>
  </div>
  <div class="card-footer">Footer</div>
</div>

A .card .card-text

B .card-body > p

C .card-footer p

D .card-header .card-text

💡 Hint

The paragraph is a direct child of the card-body div.

The selector '.card-body > p' selects only paragraphs that are direct children of elements with class 'card-body'. This matches the paragraph inside the card body only.

❓ layout

advanced

How to vertically center card footer text using Flexbox?

You want the text inside the card footer to be vertically centered. Which CSS style will achieve this using Flexbox?

Bootsrap

<div class="card-footer">Footer text</div>

A display: flex; justify-content: center;

B display: block; vertical-align: middle;

C display: flex; align-items: center;

D display: grid; align-content: start;

💡 Hint

Flexbox aligns items vertically with 'align-items'.

Using 'display: flex' and 'align-items: center' vertically centers the content inside the container.

❓ accessibility

expert

Which ARIA role best describes a Bootstrap card component?

For accessibility, which ARIA role is most appropriate to assign to a Bootstrap card element that groups related content?

Bootsrap

<div class="card" role="?">
  <div class="card-header">Header</div>
  <div class="card-body">Body content</div>
  <div class="card-footer">Footer</div>
</div>

A article

B region

C group

D complementary

💡 Hint

The card is a self-contained piece of content that can stand alone.

The 'article' role is used for self-contained content that could be independently distributed or reused, which fits a card component.

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