Bootstrap5 card
A simple card
We can use Bootstrap5’s .card and .card-body class to create a simple card that can contain header, content, bottom, and various color settings, as shown in the following example:
Example
<div class="card">
<div class="card-body">Simple cards</div>
</div>
Head and bottom
.card-header class is used to create the header style of the card .card-footer class is used to create the bottom style of the card:
Example
<div class="card">
<div class="card-header">header</div>
<div class="card-body">body</div>
<div class="card-footer">footer</div>
</div>
Multi-color card
Bootstrap 4 provides a variety of card background color categories: .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">Main cards</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">Information 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">Black Card</div>
</div>
<br>
<div class="card bg-light text-dark">
<div class="card-body">Light colored cards</div>
</div>
</div>
Title, text, and link
We can use it on the header element .card-title class to set the title of the card. .card-body class is used to set the contents of the card body. .card-text class is used to set the card .card-body in the class <p> label, if the last line can remove the bottom margin. .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>
Picture card
We can give <img> add .card-img-top (the picture is above the text) or .card-img-bottom (the picture is below the text to set the picture card:
Example
<div class="card" style="width:400px">
<img class="card-img-top" src="img_avatar1.png" alt="Card image">
<div class="card-body">
<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>
If you want to set the picture as the background, you can use the .card-img-overlay class:
Example
<div class="card" style="width:500px">
<img 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>