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.
<!doctype html>
<html lang="en">
<head>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet">
</head>
<body>
<h1 class="m-4 text-success">
GeeksforGeeks
</h1>
<h4 class="ms-4">
Bootstrap5 Cards Mixins utilities
</h4>
<div class="container d-flex mt-4 p-4">
<div class="card border-success m-3">
<div class="card-header
bg-transparent
border-warning">
Transparent Header
</div>
<div class="card-body text-secondary">
<h5 class="card-title">
Data Structures
</h5>
<p class="card-text">
A data structure is a storage that is
used to store and organize data.
</p>
</div>
<div class="card-footer border-warning">
Default Footer
</div>
</div>
<div class="card border-success m-3">
<div class="card-header border-primary">
Default Header
</div>
<div class="card-body text-secondary">
<h5 class="card-title">Algorithms</h5>
<p class="card-text">
Algorithm refers to a sequence of
finite steps to solve a particular
problem.
</p>
</div>
<div class="card-footer
bg-transparent
border-primary">
Transparent Footer
</div>
</div>
</div>
</body>
</html>
Output:
Example 2: This example demonstrates how we can add cards with changed mixins utilities in a modal.
<!doctype html>
<html lang="en">
<head>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet">
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<h1 class="m-4 text-success">
GeeksforGeeks
</h1>
<h4 class="ms-4">
Bootstrap 5 Cards Mixins utilities
</h4>
<div class="container text-center">
<button type="button"
class="btn btn-success mt-4"
data-bs-toggle="modal"
data-bs-target="#cardModal">
Launch Modal
</button>
<div class="modal fade" id="cardModal">
<div class="modal-dialog bg-dark">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">
This Modal Contains a Card
</h5>
<button type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close">
</button>
</div>
<div class="modal-body">
<div class="container d-flex mt-4 p-4">
<div class="card border-success m-3">
<div class="card-header
bg-transparent
border-warning">
Transparent Header
</div>
<div class="card-body text-secondary">
<h5 class="card-title">
Data Structures
</h5>
<p class="card-text">
A data structure is a
storage that is used to
store and organize data.
</p>
</div>
<div class="card-footer
bg-transparent
border-warning">
Transparent Footer
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button"
class="btn btn-danger"
data-bs-dismiss="modal">
Ok, I Got it!
</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Output:
