Bootstrap 5 is in alpha when this is written and it’s subject to change.
Bootstrap is a popular UI library for any JavaScript apps.
In this article, we’ll look at how to add more to cards with Bootstrap 5.
Card Footers and List Groups
We can add a footer below list groups in a card.
To do that, we can write:
<div class="card" style="width: 18rem;">
<ul class="list-group list-group-flush">
<li class="list-group-item">Lorem ipsum dolor sit amet,</li>
<li class="list-group-item">Ut ac ante enim</li>
<li class="list-group-item">Phasellus ullamcorper tellus vitae magna vulputate egestas.</li>
</ul>
<div class="card-footer">
Featured
</div>
</div>
We just added a div with the .card-footer class to add the footer.
Kitchen Sink
We can add images, titles, card text, list groups all in one card.
For instance, we can write:
<div class="card" style="width: 18rem;">
<img src="http://placekitten.com/200/200" class="card-img-top" alt="cat">
<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">Lorem ipsum dolor sit amet,</li>
<li class="list-group-item">Ut ac ante enim</li>
<li class="list-group-item">Phasellus ullamcorper tellus vitae magna vulputate egestas.</li>
</ul>
<div class="card-footer">
Featured
</div>
</div>
to add them all in one card.
The div with the .card-body has the body.
.list-group has the list group.
.card-footer has the footer.
Header and Footer
We can add card headers and footers in a card.
For example, we can write:
<div class="card">
<div class="card-header">
Featured
</div>
<div class="card-body">
<h5 class="card-title">Special title</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget ultricies enim, vitae rutrum magna. In sagittis volutpat justo, nec luctus metus auctor non. Vestibulum dictum pharetra libero in malesuada. Curabitur lacinia mauris quis molestie auctor. Suspendisse finibus posuere neque, vestibulum imperdiet arcu elementum quis. Nam eget purus ac ante egestas viverra. Fusce a bibendum neque, eu ornare mi. Curabitur convallis volutpat dolor, sed cursus odio consequat a. Proin sit amet dui nisi. Etiam eget turpis in augue pharetra consequat.
</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
We add a header with the .card-header class.
Card headers can be styled by adding .card-header to h* elements.
For example, we can write:
<div class="card">
<h5 class="card-header">Featured</h5>
<div class="card-body">
<h5 class="card-title">Special title</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget ultricies enim, vitae rutrum magna. In sagittis volutpat justo, nec luctus metus auctor non. Vestibulum dictum pharetra libero in malesuada. Curabitur lacinia mauris quis molestie auctor. Suspendisse finibus posuere neque, vestibulum imperdiet arcu elementum quis. Nam eget purus ac ante egestas viverra. Fusce a bibendum neque, eu ornare mi. Curabitur convallis volutpat dolor, sed cursus odio consequat a. Proin sit amet dui nisi. Etiam eget turpis in augue pharetra consequat.
</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
We have an h5 element instead of a div for the header.
The header will have a gray background.
We can also add block quotes in cards:
<div class="card">
<div class="card-header">
Quote
</div>
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget ultricies enim, vitae rutrum magna. In sagittis volutpat justo, nec luctus metus auctor non. Vestibulum dictum pharetra libero in malesuada. Curabitur lacinia mauris quis molestie auctor. Suspendisse finibus posuere neque, vestibulum imperdiet arcu elementum quis. Nam eget purus ac ante egestas viverra. Fusce a bibendum neque, eu ornare mi. Curabitur convallis volutpat dolor, sed cursus odio consequat a. Proin sit amet dui nisi. Etiam eget turpis in augue pharetra consequat.</p>
<footer class="blockquote-footer">Someone famous <cite title="Source Title">person</cite></footer>
</blockquote>
</div>
</div>
The content can also be centered:
<div class="card text-center">
<div class="card-header">
Featured
</div>
<div class="card-body">
<h5 class="card-title">Special title</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget ultricies enim, vitae rutrum magna. In sagittis volutpat justo, nec luctus metus auctor non. Vestibulum dictum pharetra libero in malesuada. Curabitur lacinia mauris quis molestie auctor. Suspendisse finibus posuere neque, vestibulum imperdiet arcu elementum quis. Nam eget purus ac ante egestas viverra. Fusce a bibendum neque, eu ornare mi. Curabitur convallis volutpat dolor, sed cursus odio consequat a. Proin sit amet dui nisi. Etiam eget turpis in augue pharetra consequat.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
<div class="card-footer text-muted">
20 days ago
</div>
</div>
We use the text-center class to center everything.
Conclusion
We can add classes with list groups and other content.
They can be centered and placed in different locations.