Cards
These modular elements can be readily used and customized in every layout across pages.
For detail documentation. View Cards on Bootstrap ⟶
Basic Example
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhere<div class="card" style="max-width: 30rem;">
<div class="card-img-top"><img class="img-fluid" src="../assets/img/gallery/05-f.jpg" alt="Card image cap" /></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 class="btn btn-primary btn-sm" href="#!">Go somewhere</a>
</div>
</div>
Titles, text and links
Card title
Card subtitle
Some quick example text to build on the card title and make up the bulk of the card's content.
Card linkAnother link<div class="card" style="max-width: 28rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<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 class="card-link" href="#">Card link</a><a class="card-link" href="#">Another link</a>
</div>
</div>
List Groups
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
<div class="card" style="max-width: 18rem">
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
Card with image
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
<div class="card" style="max-width: 30rem;">
<div class="card-img-top"><img class="img-fluid" src="../assets/img/gallery/06-f.jpg" alt="Card image cap" /></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>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
<div class="card-body"><a class="card-link" href="#!">Card link</a><a class="card-link" href="#!">Another link</a></div>
</div>
Header and Fooder
Special title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhere<div class="card">
<div class="card-header">Featured</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p><a class="btn btn-primary" href="#">Go somewhere</a>
</div>
</div>
Card Overlay
<div class="card text-white" style="max-max-width: 30rem;">
<div class="card-img overflow-hidden"><img class="img-fluid" src="../assets/img/gallery/07-f.jpg" alt="Card image" /></div>
<div class="card-img-overlay d-flex align-items-end">
<div>
<h5 class="card-title text-white">Card title</h5>
<p class="text-light">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
Card Groups
First card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 45 mins ago
Second card title
This card has supporting text below as a natural lead-in to additional content.
Last updated an hour ago
Yet another card title
This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
Last updated yesterday
<div class="card-group">
<div class="card">
<div class="card-img-top"><img class="img-fluid" src="../assets/img/gallery/06-f.jpg" alt="Card image cap" /></div>
<div class="card-body">
<h5 class="card-title">First card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 45 mins ago</small></p>
</div>
</div>
<div class="card">
<div class="card-img-top"><img class="img-fluid" src="../assets/img/gallery/09-f.jpg" alt="Card image cap" /></div>
<div class="card-body">
<h5 class="card-title">Second card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated an hour ago</small></p>
</div>
</div>
<div class="card">
<div class="card-img-top"><img class="img-fluid" src="../assets/img/gallery/10-f.jpg" alt="Card image cap" /></div>
<div class="card-body">
<h5 class="card-title">Yet another card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated yesterday </small></p>
</div>
</div>
</div>
When using card groups with footers, their content will automatically line up.
Card Groups
First card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Second card title
This card has supporting text below as a natural lead-in to additional content.
Yet another card title
This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
<div class="card-group">
<div class="card">
<div class="card-img-top"><img class="img-fluid" src="../assets/img/gallery/11.jpg" alt="Card image cap" /></div>
<div class="card-body">
<h5 class="card-title">First card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer"><small class="text-muted">Last updated 45 mins ago</small></div>
</div>
<div class="card">
<div class="card-img-top"><img class="img-fluid" src="../assets/img/gallery/12.jpg" alt="Card image cap" /></div>
<div class="card-body">
<h5 class="card-title">Second card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer"><small class="text-muted">Last updated an hour ago</small></div>
</div>
<div class="card">
<div class="card-img-top"><img class="img-fluid" src="../assets/img/gallery/13-f.jpg" alt="Card image cap" /></div>
<div class="card-body">
<h5 class="card-title">Yet another card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
<div class="card-footer"><small class="text-muted">Last updated yesterday</small></div>
</div>
</div>
Grid cards
First card title
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Second card title
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Yet another card title
This is a longer card with supporting text below as a natural lead-in to additional content.
<div class="row row-cols-1 row-cols-md-3 g-3">
<div class="col">
<div class="card"><img class="img-fluid" src="../assets/img/gallery/11.jpg" alt="..." />
<div class="card-body">
<h5 class="card-title">First card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col">
<div class="card"><img class="img-fluid" src="../assets/img/gallery/12.jpg" alt="..." />
<div class="card-body">
<h5 class="card-title">Second card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col">
<div class="card"><img class="img-fluid" src="../assets/img/gallery/13-f.jpg" alt="..." />
<div class="card-body">
<h5 class="card-title">Yet another card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
</div>
Grid cards with equal Height
When you need equal height, add .h-100 to the cards. If you want equal heights by default, you can set $card-height: 100% in Sass. And Just like with card groups, card footers will automatically line up.
First card title
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Second card title
This is a longer card with supporting text below as a natural lead-in to additional content.
Yet another card title
This is a longer card with supporting text below as a natural lead-in to additional content.
<div class="row row-cols-1 row-cols-md-3 g-3">
<div class="col">
<div class="card h-100"><img class="img-fluid" src="../assets/img/gallery/11.jpg" alt="..." />
<div class="card-body">
<h5 class="card-title">First card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer"><small class="text-muted">Last updated 45 mins ago</small></div>
</div>
</div>
<div class="col">
<div class="card h-100"><img class="img-fluid" src="../assets/img/gallery/12.jpg" alt="..." />
<div class="card-body">
<h5 class="card-title">Second card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer"><small class="text-muted">Last updated an hour ago</small></div>
</div>
</div>
<div class="col">
<div class="card h-100"><img class="img-fluid" src="../assets/img/gallery/13-f.jpg" alt="..." />
<div class="card-body">
<h5 class="card-title">Yet another card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer"><small class="text-muted">Last updated yesterday</small></div>
</div>
</div>
</div>