BootstrapHow-ToBeginner · 3 min read

How to Use Card Header and Footer in Bootstrap

In Bootstrap, use the card-header class to add a header section and the card-footer class to add a footer section inside a card container. These classes create distinct areas at the top and bottom of the card for titles, actions, or extra info.

📐

Syntax

The basic structure for using card header and footer in Bootstrap is to place elements with card-header and card-footer classes inside a card container. The header appears at the top, and the footer at the bottom of the card.

card: The main container for the card.
card-header: The top section, usually for titles or navigation.
card-body: The main content area of the card.
card-footer: The bottom section, often for actions or notes.

html

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

Output

A card with a top header area labeled 'Header content', a middle body area labeled 'Main content', and a bottom footer area labeled 'Footer content'.

💻

Example

This example shows a Bootstrap card with a header, body text, and footer. The header is styled with a background color and the footer is separated visually at the bottom.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Card Header and Footer Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container mt-4">
    <div class="card" style="width: 18rem;">
      <div class="card-header bg-primary text-white">
        Featured
      </div>
      <div class="card-body">
        <h5 class="card-title">Card Title</h5>
        <p class="card-text">This is some example text inside the card body.</p>
      </div>
      <div class="card-footer text-muted">
        2 days ago
      </div>
    </div>
  </div>
</body>
</html>

Output

A blue header labeled 'Featured' at the top, a white card body with a title and text in the middle, and a muted gray footer labeled '2 days ago' at the bottom, all inside a card with a fixed width.

⚠️

Common Pitfalls

Common mistakes when using card headers and footers include:

Forgetting to wrap header and footer inside the card container, which breaks layout.
Not using the correct Bootstrap classes card-header and card-footer, causing no styling.
Placing header or footer outside the card container, which can cause unexpected spacing.
Overriding Bootstrap styles without proper CSS, leading to inconsistent appearance.

html

<!-- Wrong: header outside card -->
<div class="card-header">Header outside card</div>
<div class="card">
  <div class="card-body">Body content</div>
</div>

<!-- Right: header inside card -->
<div class="card">
  <div class="card-header">Header inside card</div>
  <div class="card-body">Body content</div>
</div>

Output

The first example shows the header visually separated and not styled as part of the card, while the second example shows a properly styled card with header and body inside the same container.

📊

Quick Reference

Class	Purpose	Typical Use
card	Main container	Wraps the entire card content
card-header	Top section	Titles, tabs, or navigation
card-body	Main content area	Text, images, or other content
card-footer	Bottom section	Notes, links, or actions

✅

Key Takeaways

Use card-header and card-footer inside a card container to create distinct top and bottom sections.

Always place header and footer elements inside the card to maintain proper styling and layout.

Customize header and footer with Bootstrap utility classes for colors and spacing.

The card body holds the main content and sits between header and footer.

Check your HTML structure carefully to avoid common layout mistakes.