Bootstrap card
Bootstrap 5 Bootstrap card component
Responsive Bootstrap card built with Bootstrap 5. Enhance your web design with flexible, user-friendly cards for displaying content beautifully and efficiently.
Basic
Use the following simple card component with a title and a description:
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
<div class="card">
<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>
<button type="button" class="btn btn-primary" data-mdb-ripple-init>Button</button>
</div>
</div>
// Initialization for ES Users
import { Ripple, initMDB } from "mdb-ui-kit";
initMDB({ Ripple });
Image
Use the following example of a card element with an image for blog posts, user cards, and many more:
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="#!" class="btn btn-primary" data-mdb-ripple-init>Button</a>
</div>
</div>
// Initialization for ES Users
import { Ripple, initMDB } from "mdb-ui-kit";
initMDB({ Ripple });
Image with ripple
To add a ripple effect and subtle hover effect you need to modify the HTML markup of the card image.
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">
<div class="bg-image hover-overlay" data-mdb-ripple-init data-mdb-ripple-color="light">
<img src="https://mdbcdn.b-cdn.net/img/new/standard/nature/111.webp" class="img-fluid"/>
<a href="#!">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>
</a>
</div>
<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="#!" class="btn btn-primary" data-mdb-ripple-init>Button</a>
</div>
</div>
// Initialization for ES Users
import { Ripple, initMDB } from "mdb-ui-kit";
initMDB({ Ripple });
Note: Some examples here have fixed card width. Cards have no fixed width to start, so they’ll naturally fill the full width of its parent element. To control the width of the card place it in the grid, use the sizing utilities, or set the width inline. You can learn more in the sizing section.