Bootstrap 5 Cards

Card

Bootstrap 5 cards are bordered boxes with some inner padding around their content. It includes options such as header, footer, content, color, etc.

Basic card

A basic card is made with .card Class created, the content in the card has a .card-body Class:

Example

Add blue and hover effects to any link class.
  <div class="card-body">Basic card</div>
</div>

Try It Yourself

Header and footer

.card-header To add a title to the card, use the class:.card-footer To add a footer to the card, use the class:

Example

Add blue and hover effects to any link class.
  <div class="card-header">Header</div>
  <div class="card-body">Content</div>
  <div class="card-footer">Footer</div>
</div>

Try It Yourself

Context card

To add a background color to the card, use the context class:

  • .bg-primary
  • .bg-success
  • .bg-info
  • .bg-warning
  • .bg-danger
  • .bg-secondary
  • .bg-dark
  • .bg-light

Example

Try It Yourself

title, text, and link

Please use .card-title Add the card title to any title element. If Class used to remove is the element .card-body The last child element (or the only child element), if any .card-text .card-text Class used to remove <p>The bottom margin of the element. .card-link

Example

Add blue and hover effects to any link class.
  <div class="card-body">
    <div class="card">
    <h4 class="card-title">Card Title</h4>
    <p class="card-text">Some example text. Some example text.</p>
    <a href="#" class="card-link">Card Link</a>
  </div>
</div>

Try It Yourself

<a href="#" class="card-link">Another Link</a>

Card Image .card-img-top or .card-img-bottom Add to <img>, you can place the image at the top or bottom of the card.

Note that we added an image outside of .card-body to span the entire width:

Example

<div class="card" style="width:400px">
  <img class="card-img-top" src="avatar.png" alt="Card image">
  <div class="card-body">
    <h4 class="card-title">Bill Gates</h4>
    <p class="card-text">Bill Gates is a programmer and engineer. Some sample text. Some sample text.</p>
    <a href="#" class="btn btn-primary">View Profile</a>
  </div>
</div>

Try It Yourself

Card Image Overlay

Convert the image to a card background and use .card-img-overlay Add text to the top of the image:

Example

<div class="card" style="width:500px">
  <img class="card-img-top" src="avatar.png" alt="Card image">
  <div class="card-img-overlay">
    <h4 class="card-title">Bill Gates</h4>
    <p class="card-text">Some sample text. Some sample text.</p>
    <a href="#" class="btn btn-primary">View Profile</a>
  </div>
</div>

Try It Yourself