Card structure (header, body, footer) in Bootsrap

Introduction

Cards help organize content into neat boxes with a header, body, and footer. This makes information easy to read and visually clear.

Showing a user profile with a picture, name, and contact info

Displaying a product with title, description, and price

Presenting a blog post preview with title, summary, and read more link

Grouping related information like event details with date, description, and location

Syntax

Bootsrap

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

The card-header is for the top part, usually a title or label.

The card-body holds the main content like text or images.

Examples

A simple card showing a profile with header, body, and footer.

Bootsrap

<div class="card">
  <div class="card-header">Profile</div>
  <div class="card-body">Name: Jane Doe</div>
  <div class="card-footer">Contact: [e-mail]</div>
</div>

You can have a card with only body if you don't need header or footer.

Bootsrap

<div class="card">
  <div class="card-body">Just body content without header or footer.</div>
</div>

Card with a title and text inside the body, plus a footer showing price.

Bootsrap

<div class="card">
  <div class="card-header">Product</div>
  <div class="card-body">
    <h5 class="card-title">Coffee Mug</h5>
    <p class="card-text">A nice mug for your coffee.</p>
  </div>
  <div class="card-footer">$9.99</div>
</div>

Sample Program

This example shows a Bootstrap card with a header, body, and footer inside a container. The card is limited in width for better reading on larger screens.

Bootsrap

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Bootstrap Card Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
  <main class="container my-4">
    <section class="card" style="max-width: 20rem;">
      <div class="card-header">User Profile</div>
      <div class="card-body">
        <h5 class="card-title">Jane Doe</h5>
        <p class="card-text">Web developer and coffee lover.</p>
      </div>
      <div class="card-footer text-muted">Contact: [e-mail]</div>
    </section>
  </main>
</body>
</html>

Important Notes

Use text-muted class in footer to make text lighter and less distracting.

Cards are responsive and adjust nicely on small screens.

You can add images inside card-body or use card-img-top for images above the header.

Summary

Cards organize content into header, body, and footer sections.

Bootstrap provides easy classes to style these parts consistently.

Cards improve readability and layout on all screen sizes.

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