Bootstrap 5 Cards


Bootstrap 5 offers a versatile and powerful way to create responsive cards for your web projects. Bootstrap cards are containers that can hold various types of content like text, images, links, buttons, and more. They are designed to help you organize and display content in an attractive and responsive manner.

Basic Card

A basic card is created with the .card class, and content inside the card has a .card-body class.

Example 
<div class="card">
  <div class="card-body">Basic card</div>
</div>
Try it Yourself

Card with Header and Footer

The .card-header class adds a heading to the card and the .card-footer class adds a footer to the card.

Example 
<div class="card">
  <div class="card-header">Header</div>
  <div class="card-body">Body Content</div>
  <div class="card-footer">Footer</div>
</div>
Try it Yourself

Colored Cards

You can also apply contextual classes to change the card's background color such as .bg-primary , .bg-success , .bg-info , .bg-warning , .bg-danger , .bg-secondary , .bg-dark and .bg-light .

Example 
<div class="card bg-primary text-white">
  <div class="card-header">Header</div>
  <div class="card-body">Body Content</div>
</div>
Try it Yourself

Titles, text, and links

Card titles are used by adding .card-title to a any heading tag. The .card-text class is used to remove bottom margins for a <p> element if it is the last child (or the only one) inside . In the same way, links are added and placed next to each other by adding .card-link to an <a> tag.

Example 
<div class="card">
 <div class="card-body">
   <h4 class="card-title">Card title</h4>
   <p class="card-text">Add some example text here...</p>
   <a href="#" class="card-link">Card link</a>
   <a href="#" class="card-link">Another link</a>
 </div>
</div>
Try it Yourself

Card Images

In Bootstrap 5, you can add images to your cards using the .card-img-top , .card-img-bottom , or .card-img classes, depending on where you want the image to appear within the card.

  • .card-img-top add an image at the top of the card.
  • .card-img-bottom add an image at the bottom of the card.
Example 
!--- Image on top ---!
<div class="card">
 <img class="card-img-top" src="2.jpg" alt="Card image">
 <div class="card-body">
  <h4 class="card-title">Image Title</h4>
  <p class="card-text">Some example text.</p>
  <a href="#" class="btn btn-primary">Know More</a>
 </div>
</div>
!--- Image on bottom ---!
<div class="card">
 <div class="card-body">
  <h4 class="card-title">Image Title</h4>
  <p class="card-text">Some example text.</p>
  <a href="#" class="btn btn-primary">Know More</a>
 </div>
 <img class="card-img-bottom" src="2.jpg" alt="Card image">
</div>
Try it Yourself

Card Image Overlays

Turn an image into a card background and use .card-img-Overlay to add text on top of the image.

Example 
<div class="card">
 <img class="card-img-top" src="4.jpg" alt="Card image">
 <div class="card-img-overlay">
  <h4 class="card-title text-white">Image Title</h4>
  <p class="card-text text-white">Some example text.</p>
  <a href="#" class="btn btn-primary">Know More</a>
 </div>
</div>
Try it Yourself