Cards
Default Card
A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. Card content can be aligned to center or right by using helper classes such as .text-center or .text-right
Card Title
Left-aligned content. Example text to build up the card content. Mauris consequat.
Button<div class="card">
<img src="../assets/images/ph.jpg" class="card-img-top" alt="">
<div class="card-body">
<h4 class="card-title">Card Title</h4>
<p class="card-text">...</p>
<a href="#x" class="btn btn-primary">Button</a>
</div><!-- / card-body -->
</div><!-- / card -->
Card with raised image
Add .card-w-raised-img-top to the .card, .card-raised-img-top to the <img> and .text-center to the .card-body for the center text-alignment to achieve this card style.
Card - Raised image
Phasellus accumsan, neque vitae hendrerit pretium, turpis nisi mauris consequat.
<div class="card card-w-raised-img-top">
<div class="card-body text-center">
<img class="card-raised-img-top rounded-sm raised-sm mb-30" src="../assets/images/ph.jpg" alt="">
<h4 class="card-title">Card - Raised image</h4>
<p class="card-text">...</p>
</div><!-- / card-body -->
</div><!-- / card -->
Card with raised icon
Add .w-raised-icon to the .card and wrap the icon in a <div> with .raised-icon class.
To change the size of the icon container you can add .sm-icon, .lg-icon or .xl-icon besides the .w-raised-icon class.
To change the icon size you can add sizing classes like .icon-sm, .icon-lg and .icon-xl to the .raised-icon.
<div class="card w-raised-icon">
<div class="card-body">
<div class="raised-icon bg-white circle raised">
<i class="bi-gear text-info"></i>
</div><!-- / raised-icon -->
<h4 class="card-title mt-30">Settings</h4>
<p class="card-text">Phasellus accumsan neque.</p>
<a href="#x" class="btn btn-sm btn-info">Get Started</a>
</div><!-- / card-body -->
</div><!-- / card -->
Card with image overlay
Turn an image into a card background and overlay your card’s text. Depending on the image, you may or may not need additional styles or utilities.
<div class="card dark">
<img src="../assets/images/ph.jpg" class="card-img rounded" alt="">
<div class="card-img-overlay overflow-hidden">
<h5 class="card-title">Card title</h5>
<p class="card-text">...</p>
<p class="card-text">...</p>
</div><!-- / card-img-overlay -->
</div><!-- / card -->
Content Card
You can add .row > .col- inside cards to build up functional cards with more control over the content display, like the user-profile card below.
<div class="card">
<div class="card-body">
<div class="row v-center">
<div class="col-md-4 grid-item tablet-text-center tablet-top">
<img src="../assets/images/ph-mini.jpg" alt="" class="circle p-5 b-2 border-light" style="max-width: 150px;">
</div><!-- / column -->
<div class="col-md-5 tablet-text-center tablet-top">
<h4 class="card-title">Jacob G</h4>
<p class="fs-12 mb-5 text-primary">UI Designer</p>
<p class="fs-10 mb-0 opc-50">UI Dev Team</p>
</div><!-- / column -->
<div class="col-md-3 text-center">
<div class="row">
<div class="col-6 col-md-12 tablet-text-right p-x-5 mb-5">
<a href="#x" class="btn btn-xs btn-primary btn-circle btn-icon"><i class="bi-telephone"></i></a>
</div><!-- / column -->
<div class="col-6 col-md-12 tablet-text-left p-x-5">
<a href="#x" class="btn btn-xs btn-primary btn-circle btn-icon"><i class="bi-envelope"></i></a>
</div><!-- / column -->
</div><!-- / row -->
</div><!-- / column -->
</div><!-- / row -->
</div><!-- / card-body -->
</div><!-- / card -->
Card with Dropdown
You can add dropdowns in card content, you can use .float-end on the .dropdown to position it to the right-side of the card.
Card Title
Phasellus accumsan, neque vitae hendrerit pretium, turpis nisi magna sed purus scelerisque pulvinar. Pellentesque a libero a nunc consectetur.
Button<div class="card">
<div class="card-body">
<div class="dropdown float-end">
<a href="#x" class="dropdown-toggle arrow-none card-drop p-0" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi-three-dots-vertical"></i>
</a><!-- / dropdown-toggle -->
<div class="dropdown-menu dropdown-menu-end">
<a href="javascript:void(0);" class="dropdown-item">
<i class="bi-person mr-5"></i>
<span>Profile</span>
</a><!-- / dropdown-item -->
<a href="javascript:void(0);" class="dropdown-item">
<i class="bi-gear mr-5"></i>
<span>Settings</span>
</a><!-- / dropdown-item -->
</div><!-- / dropdown-menu -->
</div><!-- / dropdown -->
<h4 class="card-title">Card Title</h4>
<p class="card-text">...</p>
<a href="#x" class="btn btn-primary">Button</a>
</div><!-- / card-body -->
</div><!-- / card -->