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 customize cards with Bootstrap 5.
Sizing
We can change a card’s width with the column classes.
For example, we can write:
<div class="row">
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">title</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">title</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>
We have 2 cards with the col-sm-6 classes to make them take half the width of the viewport if hits the sm breakpoint or wider.
Using Utilities
Also, we can use the utility classes to change the width of a card.
For instance, we can write:
<div class="card w-75">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
</div>
to make a card 75% of the screen’s width.
w-75 is the class that makes it so.
Using Custom CSS
To change sizes, we can also use custom CSS.
For example, we can write:
<div class="card" style="width: 20rem;">
<div class="card-body">
<h5 class="card-title">title</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
to make the width of the card 20rem.
Text Alignment
The alignment of the text can change.
For instance, we can write:
<div class="card text-center" style="width: 20rem;">
<div class="card-body">
<h5 class="card-title">title</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
to make the text center with the .text-center class.
We can also use the .text-right class to right-align the text:
<div class="card text-right" style="width: 20rem;">
<div class="card-body">
<h5 class="card-title">title</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
Navigation
We can add navigation to the top of the card.
For example, we can write:
<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1">Disabled</a>
</li>
</ul>
</div>
<div class="card-body">
<h5 class="card-title">title</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
We add a ul with the nav classes applied to it.
And we have the li s with the nav-item classes.
Now we have a nav bar at the top of the page displayed as a tab.
.card-header-tab and .nav-tabs make the links display as tabs.
The nav is added in the card header to show it on top.
We can make the links displayed as pills with the .card-header-pills class.
For instance, we can write:
<div class="card text-center">
<div class="card-header">
<ul class="nav nav-pills card-header-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1">Disabled</a>
</li>
</ul>
</div>
<div class="card-body">
<h5 class="card-title">title</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
to display links as tabs.
Images
We can add images inside cards.
For example, we can write:
<div class="card mb-3">
<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">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
The image is added above the body.
We make it flush with the edges with the .card-img-top class.
Conclusion
We can change the size with built-in classes or CSS.
Also, we can add navigation and images to cards.
