Bootstrap5 Cards

Simple Card

We can create a simple card using Bootstrap5's .card and .card-body classes. Cards can include headers, content, footers, and various color settings. Here is an example:

Example

<div class="card">
  <div class="card-body">Simple Card</div>
</div>

Header and Footer

The .card-header class is used to create the header style for the card, and the .card-footer class is used to create the footer style:

Example

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

Multiple Color Cards

Bootstrap 5 provides various background color classes for cards: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark, and .bg-light.

Example

<div class="container">
  <h2>Multiple Color Cards</h2>
  <div class="card">
    <div class="card-body">Basic Card</div>
  </div>
  <br>
  <div class="card bg-primary text-white">
    <div class="card-body">Primary Card</div>
  </div>
  <br>
  <div class="card bg-success text-white">
    <div class="card-body">Success Card</div>
  </div>
  <br>
  <div class="card bg-info text-white">
    <div class="card-body">Info Card</div>
  </div>
  <br>
  <div class="card bg-warning text-white">
    <div class="card-body">Warning Card</div>
  </div>
  <br>
  <div class="card bg-danger text-white">
    <div class="card-body">Danger Card</div>
  </div>
  <br>
  <div class="card bg-secondary text-white">
    <div class="card-body">Secondary Card</div>
  </div>
  <br>
  <div class="card bg-dark text-white">
    <div class="card-body">Dark Card</div>
  </div>
  <br>
  <div class="card bg-light text-dark">
    <div class="card-body">Light Card</div>
  </div>
</div>

Title, Text, and Links

We can use the .card-title class to set the title of the card on the header element. The .card-body class is used to set the content of the card body. The .card-text class is used for <p> tags within the .card-body class, and if it's the last line, it can remove the bottom margin. The .card-link class is used to set the color for links.

Example

<div class="card">
  <div class="card-body">
    <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>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Image Card

We can add .card-img-top (image above text) or .card-img-bottom (image below text) to <img> to set up an image card:

Example

<div class="card" style="width:400px">

<div class="card" style="width:500px">
  <img decoding="async" class="card-img-top" src="img_avatar1.png" alt="Card image">
  <div class="card-img-overlay">
    <h4 class="card-title">John Doe</h4>
    <p class="card-text">Some example text.</p>
    <a href="#" class="btn btn-primary">See Profile</a>
  </div>
</div>