0
0
Bootsrapmarkup~5 mins

Card structure (header, body, footer) in Bootsrap

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
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: jane@example.com</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: jane@example.com</div>
    </section>
  </main>
</body>
</html>
OutputSuccess
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.