Bootstrap 4 Cards
Bootstrap 4 Cards component
Bootstrap cards are components which display content build of different elements with characteristic shadows, depth and hover effects.
Basic Bootstrap 4 version
<!-- Card -->
<div class="card">
<!-- Card image -->
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Others/images/43.webp" alt="Card image cap" />
<!-- Card content -->
<div class="card-body">
<!-- Title -->
<h4 class="card-title"><a>Card title</a></h4>
<!-- Text -->
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<!-- Button -->
<a href="#" data-mdb-ripple-init class="btn btn-primary">Button</a>
</div>
</div>
<!-- Card -->
Above is an example template for a Cards in the Bootstrap 4 version based on jQuery. V4 is an older version of Bootstrap and we discourage implementing it in new projects.
Below you will find the same component but in the latest, more modern Bootstrap 5. We encourage you to use the v5 version instead, the v5 is more lightweight, more reliable and based on pure JavaScript instead of jQuery.
This page only compares the two version, you can find full documentation - with multiple options & API details via one of the links below:
Bootstrap v5 - full documentation
Bootstrap v4 - full documentation
Basic Bootstrap 5 version
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Button
<div class="card">
<img src="https://mdbcdn.b-cdn.net/img/new/standard/nature/184.webp" class="card-img-top" alt="Fissure in Sandstone"/>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#!" data-mdb-ripple-init class="btn btn-primary">Button</a>
</div>
</div>