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.