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 card layouts with Bootstrap 5.
Mixins Utilities
We can remove the background of the header and footer with the .bg-transparent class.
For example, we can write:
<div class="card border-success mb-3" style="max-width: 18rem;">
<div class="card-header bg-transparent border-success">Header</div>
<div class="card-body text-success">
<h5 class="card-title">Success card title</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque magna dui, .</p>
</div>
<div class="card-footer bg-transparent border-success">Footer</div>
</div>
We have the .bg-transparent class on the .card-header div and .card-footer div to remove their background color.
Card Layout
Cards can be laid out in a group.
To do that, we can put the cards inside the div with the .card-group class.
For example, we can write:
<div class="card-group">
<div class="card">
<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. Pellentesque magna dui, mattis ornare massa a, dapibus iaculis est. 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>
<div class="card">
<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. Pellentesque magna dui, mattis ornare massa a, dapibus iaculis est. 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>
<div class="card">
<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. Pellentesque magna dui, mattis ornare massa a, dapibus iaculis est. 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>
</div>
We have 3 cards that are inside a container div to put them side by side.
They’re arranged responsively.
Grid Cards
We can also place them in a grid with the .row and .col classes.
For example, we can write:
<div class="row row-cols-1 row-cols-md-2 g-4">
<div class="col">
<div class="card">
<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. Pellentesque magna dui, mattis ornare massa a, dapibus iaculis est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. .</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<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">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 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. Pellentesque magna dui, mattis ornare massa a, dapibus iaculis est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<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. Pellentesque magna dui, mattis ornare massa a, dapibus iaculis est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. .</p>
</div>
</div>
</div>
</div>
The container div with the cards have .row and .row-col-1 classes to keep them in the container.
Then we add the .row-cols-md-2 class to show 2 of them side by side if the breakpoint is md or wider.
g-4 has the gutter to add some margins for the card.
We can make them equal height by setting the height with the .h-* classes.
For instance, we can use the .h-100 class on the cards:
<div class="row row-cols-1 row-cols-md-2 g-4">
<div class="col">
<div class="card h-100">
<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. Pellentesque magna dui, mattis ornare massa a, dapibus iaculis est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. .</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<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">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 h-100">
<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. Pellentesque magna dui, mattis ornare massa a, dapibus iaculis est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<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. Pellentesque magna dui, mattis ornare massa a, dapibus iaculis est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. .</p>
</div>
</div>
</div>
</div>
We add the .h-100 class to the cards to set the height to be the same.
Conclusion
We can remove the backgrounds of headers and footers.
Also, we add layouts to the cards and set the heights.