Bootstrap 5 Cards-ApiDemos™

Simple Cards

card and .card-body classes of Bootstrap5 to create a simple card that can contain a header, content, bottom and various color settings, as shown in the following example:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap5 demos</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Simple Cards(apidemos.com)</h2>
  <div class="card">
    <div class="card-body">Simple cards</div>
  </div>
</div>

</body>
</html>

Output:

Bootstrap 5 Cards

Header and bottom

The .card-header class is used to create the head style of the card and the .card-footer class is used to create the bottom style of the card.

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap5 demos</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Header and bottom of the card(apidemos.com)</h2>
  <div class="card">
    <div class="card-header">header</div>
    <div class="card-body">content</div> 
    <div class="card-footer">bottom</div>
  </div>
</div>

</body>
</html>

Output:

Bootstrap 5 Cards

Multi-color Cards

Bootstrap 5 provides a variety of background color classes for cards:

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

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap5 demos</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Multi-color cards(apidemos.com)</h2>
  <div class="card">
    <div class="card-body">Basic Cards</div>
  </div>
  <br>
  <div class="card bg-primary text-white">
    <div class="card-body">primary Cards</div>
  </div>
  <br>
  <div class="card bg-success text-white">
    <div class="card-body">success Cards</div>
  </div>
  <br>
  <div class="card bg-info text-white">
    <div class="card-body">info Cards</div>
  </div>
  <br>
  <div class="card bg-warning text-white">
    <div class="card-body">warning Cards</div>
  </div>
  <br>
  <div class="card bg-danger text-white">
    <div class="card-body">danger Cards</div>
  </div>
  <br>
  <div class="card bg-secondary text-white">
    <div class="card-body">secondary Cards</div>
  </div>
  <br>
  <div class="card bg-dark text-white">
    <div class="card-body">dark Cards</div>
  </div>
  <br>
  <div class="card bg-light text-dark">
    <div class="card-body">light Cards</div>
  </div>
</div>

</body>
</html>

Output:

Bootstrap 5 Cards

Title, text and links

We can use the .card-title class on the header element to set the title of the card. The .card-body class is used to set the content of the card body. The .card-text class is used to set the <p> tag in the card .card-body class and to remove the bottom margin if it says last line. The .card-link class is used to set the color for the link.

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap5 demos</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Title, text and links(apidemos.com)</h2>
  <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>
</div>

</body>
</html>

Output:

Bootstrap 5 Cards

Image Cards

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

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap5 demos</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Image Cards(apidemos.com)</h2>
  <p>card-img-top:</p>
  <div class="card" style="width:400px">
    <img class="card-img-top" src="https://apidemos.geek-docs.com/bootstrap/cinqueterre.jpg" alt="Card image" style="width:100%">
    <div class="card-body">
      <h4 class="card-title">John Doe</h4>
      <p class="card-text">Some example text some example text. John Doe is an architect and engineer</p>
      <a href="#" class="btn btn-primary">See Profile</a>
    </div>
  </div>
  <br>

  <p>card-img-bottom:</p>
  <div class="card" style="width:400px">
    <div class="card-body">
      <h4 class="card-title">Jane Doe</h4>
      <p class="card-text">Some example text some example text. Jane Doe is an architect and engineer</p>
      <a href="#" class="btn btn-primary">See Profile</a>
    </div>
    <img class="card-img-bottom" src="https://apidemos.geek-docs.com/bootstrap/cinqueterre.jpg" alt="Card image" style="width:100%">
  </div>
</div>

</body>
</html>

Output:

Bootstrap 5 Cards

If the image is to be set as a background, you can use the .card-img-overlay class:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap5 demos</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Text overlay image(apidemos.com)</h2>
  <p>If the image is to be set as a background, you can use the .card-img-overlay class:</p>
  <div class="card img-fluid" style="width:500px">
    <img class="card-img-top" src="https://apidemos.geek-docs.com/bootstrap/cinqueterre.jpg" alt="Card image" style="width:100%">
    <div class="card-img-overlay">
      <h4 class="card-title">John Doe</h4>
      <p class="card-text">Some example text some example text. Some example text some example text. Some example text some example text. Some example text some example text.</p>
      <a href="#" class="btn btn-primary">See Profile</a>
    </div>
  </div>
</div>

</body>
</html>

Output:

Bootstrap 5 Cards

Bootstrap 5 Cards

Simple Cards

Header and bottom

Multi-color Cards

Title, text and links

Image Cards

Related

Top