Card Variants in Bootstrap

Bootstrap cards are highly flexible components that can be customized with various variants, including headers, footers, and images. These variants help structure and style card content according to different needs.

1. Card Header

The card header is an optional section that can be added to a card to display additional content or context at the top of the card.

Class: .card-header

Usage:

Add a .card-header section within the card container to include header content.

Example:

<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Card Title</h5>
    <p class="card-text">Some text inside the card body.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
  <div class="card-footer text-muted">
    Footer text
  </div>
</div>

• .card-header: Adds a header section to the card. This is useful for placing titles, labels, or other introductory content at the top of the card.

2. Card Footer

The card footer is an optional section that appears at the bottom of the card. It can be used for additional information, actions, or links.

Class: .card-footer

Usage:

Add a .card-footer section within the card container to include footer content.

Example:

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card Title</h5>
    <p class="card-text">Some text inside the card body.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
  <div class="card-footer text-muted">
    Footer text
  </div>
</div>

• .card-footer: Adds a footer section to the card. This can be used for additional actions, credits, or other information relevant to the card.

3. Card Images

Cards can include images in various positions. Bootstrap provides classes to place images at the top, bottom, or as part of the card content.

a. Card Image Top

Displays an image at the top of the card, above the card body.

Class: .card-img-top

Usage:

Add an image element with the .card-img-top class inside the card container.

Example:

<div class="card" style="width: 18rem;">
  <img src="https://via.placeholder.com/150" class="card-img-top" alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card Title</h5>
    <p class="card-text">Some text inside the card body.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

• .card-img-top: Places an image at the top of the card, covering the full width of the card.

b. Card Image Bottom

Displays an image at the bottom of the card, below the card body.

Class: .card-img-bottom

Usage:

Add an image element with the .card-img-bottom class inside the card container.

Example:

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card Title</h5>
    <p class="card-text">Some text inside the card body.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
  <img src="https://via.placeholder.com/150" class="card-img-bottom" alt="Card image cap">
</div>

• .card-img-bottom: Places an image at the bottom of the card, below the card body.

c. Card Image Overlay

Overlay an image with card content, creating a more integrated design.

Example:

<div class="card text-white">
  <img src="https://via.placeholder.com/150" class="card-img" alt="Card image">
  <div class="card-img-overlay">
    <h5 class="card-title">Overlay Title</h5>
    <p class="card-text">Some text inside the card overlay.</p>
    <a href="#" class="btn btn-light">Go somewhere</a>
  </div>
</div>

• .card-img: Sets an image as the card's background.
• .card-img-overlay: Positions content over the image.

Summary of Card Variants in Bootstrap

• Card Header: Use .card-header to add a header section at the top of the card for titles or additional context.
• Card Footer: Use .card-footer to add a footer section at the bottom of the card for extra information or actions.
• Card Images:
  • Top: Use .card-img-top to place an image at the top of the card.
  • Bottom: Use .card-img-bottom to place an image at the bottom of the card.
  • Overlay: Use .card-img and .card-img-overlay to overlay content on an image.