Bootstrap 5 Cards Mixins utilities
Last Updated :
13 Feb, 2023
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.
HTML
<!doctype html>
< html lang = "en" >
< head >
< link href =
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.
HTML
<!doctype html>
< html lang = "en" >
< head >
< link href =
rel = "stylesheet" >
< script src =
</ 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:
Reference: https://getbootstrap.com/docs/5.0/components/card/#mixins-utilities
Share your thoughts in the comments
Please Login to comment...