Bootstrap 5 Cards Mixins utilities

In Bootstrap 5, the cards can have additional headers and footers and their backgrounds can be made completely transparent using the .bg-transparent class. Additionally, the borders surrounding the headers and footers can be changed by using the border-color classes. 

Bootstrap 5 Cards Mixins utility Classes:

• bg-transparent: This class is used to add transparent background to the header and footer which otherwise will have a default light background.
• border-[color]: This class when added to the header and footer elements can change the borders of them individually.   

Syntax:

<div class="card">
 <div class="card-header 
 bg-transparent 
 border-[color]">
 ...
 </div>

 <!-- Card's contents --!>
 <div class="card-footer 
 bg-transparent 
 border-[color]">
 ...
 </div>
</div>

Example 1: This example shows two cards horizontal to each other with transparent or normal headers and footers and different borders around the headers and footers.

Output:

Example 2: This example demonstrates how we can add cards with changed mixins utilities in a modal.

Output: