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.

#web-development #technology #programming #javascript #software-development