Cards
Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.
Examples
Cards are built with as little markup and styles as possible, but still manage to deliver a ton of control and customization. Built with flexbox, they offer easy alignment and mix well with other Bootstrap components.
Below is an example of a basic card with mixed content and a fixed width. Cards have no fixed width to start, so they’ll naturally fill the full width of its parent element.
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhere
<div class="card" style="width: 18rem;">
<img src="assets/images/course/4by3/02.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
We have used cards to display course grid style almost everywhere in theme. With the help of utility classes, we have designed many ready-to-use cards.
Card with image and content
Sketch from A to Z: for app designer
Proposal indulged no do sociable he throwing settling..
- 4.0/5.0
<div class="card shadow h-100">
<!-- Image -->
<img src="assets/images/course/4by3/02.jpg" class="card-img-top" alt="course image">
<!-- Card body -->
<div class="card-body pb-0">
<!-- Badge and favorite -->
<div class="d-flex justify-content-between mb-2">
<a href="#" class="badge bg-primary bg-opacity-10 text-primary">All level</a>
<a href="#" class="text-dark"><i class="far fa-heart"></i></a>
</div>
<!-- Title -->
<h5 class="card-title fw-normal"><a href="#">Sketch from A to Z: for app designer</a></h5>
<p class="mb-2 text-truncate-2">Proposal indulged no do sociable he throwing settling..</p>
<!-- Rating star -->
<ul class="list-inline mb-0">
<li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
<li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
<li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
<li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
<li class="list-inline-item me-0 small"><i class="far fa-star text-warning"></i></li>
<li class="list-inline-item ms-2 text-dark">4.0/5.0</li>
</ul>
</div>
<!-- Card footer -->
<div class="card-footer pt-0 pb-3">
<hr>
<div class="d-flex justify-content-between">
<span class="text-dark"><i class="far fa-clock text-danger me-2"></i>12h 56m</span>
<span class="text-dark"><i class="fas fa-table text-orange me-2"></i>15 lectures</span>
</div>
</div>
</div>
Card with hover trigger action
Use .action-trigger-hover class with card and add .item-show-hover to hover element
Free
Free
Add to cart
<div class="card action-trigger-hover border">
<!-- Image -->
<img src="assets/images/course/4by3/23.jpg" class="card-img-top" alt="course image">
<!-- Ribbon -->
<div class="ribbon mt-3"><span>Free</span></div>
<!-- Card body -->
<div class="card-body pb-0">
<!-- Badge and favorite -->
<div class="d-flex justify-content-between mb-3">
<span class="hstack gap-2">
<a href="#" class="badge bg-primary bg-opacity-10 text-primary">Design</a>
<a href="#" class="badge bg-dark text-white">Beginner</a>
</span>
<a href="#"><i class="far fa-bookmark text-dark"></i></a>
</div>
<!-- Title -->
<h5 class="card-title"><a href="#">The complete Digital Marketing Course - 8 Course in 1</a></h5>
<!-- Rating -->
<div class="d-flex justify-content-between mb-2">
<div class="hstack gap-2">
<p class="text-warning m-0">4.5<i class="fas fa-star text-warning ms-1"></i></p>
<span class="small">(6500)</span>
</div>
<div class="hstack gap-2">
<p class="text-dark m-0">6500</p>
<span class="small">(Student)</span>
</div>
</div>
<!-- Time -->
<div class="hstack gap-3">
<span class="text-dark"><i class="far fa-clock text-danger me-2"></i>6h 56m</span>
<span class="text-dark"><i class="fas fa-table text-orange me-2"></i>82 lectures</span>
</div>
</div>
<!-- Card footer -->
<div class="card-footer pt-0">
<hr>
<!-- Avatar and Price -->
<div class="d-flex justify-content-between align-items-center">
<!-- Avatar -->
<div class="d-flex align-items-center">
<div class="avatar avatar-sm">
<img class="avatar-img rounded-1" src="assets/images/avatar/01.jpg" alt="avatar">
</div>
<p class="mb-0 ms-2"><a href="#" class="text-dark">Larry Lawson</a></p>
</div>
<!-- Price -->
<div>
<h4 class="text-success mb-0 item-show">Free</h4>
<a href="#" class="btn-sm btn-success-soft item-show-hover"><i class="fas fa-shopping-cart me-2"></i>Add to cart</a>
</div>
</div>
</div>
</div>
Card with hover overlay and element
Use .card-element-hover and .card-overlay-hover classes to show element and overlay on hover
<div class="card p-2 shadow">
<div class="rounded-top overflow-hidden">
<div class="card-overlay-hover">
<!-- Image -->
<img src="assets/images/course/4by3/23.jpg" class="card-img-top" alt="course image">
</div>
<!-- Hover element -->
<div class="card-img-overlay">
<div class="card-element-hover d-flex justify-content-end">
<a href="#" class="icon-md bg-white rounded-circle text-center">
<i class="fas fa-shopping-cart text-danger"></i>
</a>
</div>
</div>
</div>
<!-- Card body -->
<div class="card-body">
<!-- Badge and icon -->
<div class="d-flex justify-content-between">
<!-- Rating and info -->
<ul class="list-inline hstack gap-2 mb-0">
<!-- Info -->
<li class="list-inline-item d-flex justify-content-center align-items-center">
<div class="icon-md bg-orange bg-opacity-10 text-orange rounded-circle"><i class="fas fa-user-graduate"></i>
</div>
<span class="text-dark ms-2">9.1k</span>
</li>
<!-- Rating -->
<li class="list-inline-item d-flex justify-content-center align-items-center">
<div class="icon-md bg-warning bg-opacity-15 text-warning rounded-circle"><i class="fas fa-star"></i>
</div>
<span class="text-dark ms-2">4.5</span>
</li>
</ul>
<!-- Avatar -->
<div class="avatar avatar-sm">
<img class="avatar-img rounded-circle" src="assets/images/avatar/09.jpg" alt="avatar">
</div>
</div>
<!-- Divider -->
<hr>
<!-- Title -->
<h5 class="card-title"><a href="#">The Complete Digital Marketing Course - 12 Courses in 1</a></h5>
<!-- Badge and Price -->
<div class="d-flex justify-content-between align-items-center mb-0">
<div>
<a href="#" class="badge bg-info bg-opacity-10 text-info me-2"><i class="fas fa-circle small fw-bold"></i> Personal Development </a>
</div>
<!-- Price -->
<h3 class="text-success mb-0">$140</h3>
</div>
</div>
</div>
Card with video button
To make video popup work you must include Glightbox CSS and Javascript file on the page.
Learn French Language: Complete Course
Live Students
-
-
-
-
-
1K+
<div class="card p-2">
<div class="position-relative">
<img src="assets/images/course/4by3/02.jpg" class="card-img rounded-2" alt="Card image">
<div class="card-img-overlay">
<div class="position-absolute top-50 start-50 translate-middle">
<a href="https://www.youtube.com/embed/tXHviS-4ygo" class="btn btn-lg text-danger btn-round btn-white-shadow" data-glightbox="" data-gallery="video-tour">
<i class="fas fa-play"></i>
</a>
</div>
</div>
</div>
<!-- Card body -->
<div class="card-body">
<!-- Title -->
<h5><a href="#" class="stretched-link">Learn French Language: Complete Course</a></h5>
<!-- Avatar group and button -->
<div class="d-sm-flex justify-content-sm-between align-items-center mt-3">
<!-- Avatar Group -->
<div>
<h6 class="mb-1 fw-normal"><i class="fas fa-circle fw-bold text-success small me-2"></i>Live Students</h6>
<ul class="avatar-group mb-0">
<li class="avatar avatar-xs">
<img class="avatar-img rounded-circle" src="assets/images/avatar/01.jpg" alt="avatar">
</li>
<li class="avatar avatar-xs">
<img class="avatar-img rounded-circle" src="assets/images/avatar/09.jpg" alt="avatar">
</li>
<li class="avatar avatar-xs">
<img class="avatar-img rounded-circle" src="assets/images/avatar/01.jpg" alt="avatar">
</li>
<li class="avatar avatar-xs">
<img class="avatar-img rounded-circle" src="assets/images/avatar/09.jpg" alt="avatar">
</li>
<li class="avatar avatar-xs">
<div class="avatar-img rounded-circle bg-primary">
<span class="text-white position-absolute top-50 start-50 translate-middle small">1K+</span>
</div>
</li>
</ul>
</div>
<!-- Button -->
<button class="btn btn-sm btn-success mb-0">Join now</button>
</div>
</div>
</div>
Card hover shadow
Use .shadow-hover class with card and to add shadow on hover
Larry Lawson
Tutor
<div class="card shadow-hover overflow-hidden">
<div class="position-relative">
<!-- Image -->
<img class="card-img-top" src="assets/images/course/4by3/23.jpg" alt="Card image">
<!-- Overlay -->
<div class="bg-overlay bg-dark opacity-4"></div>
<div class="card-img-overlay d-flex align-items-start flex-column">
<!-- Card overlay bottom -->
<div class="w-100 mt-auto d-inline-flex">
<div class="d-flex align-items-center bg-white p-2 rounded-2">
<!-- Avatar -->
<div class="avatar avatar-sm me-2">
<img class="avatar-img rounded-1" src="assets/images/avatar/01.jpg" alt="avatar">
</div>
<!-- Avatar info -->
<div>
<h6 class="mb-0"><a href="#" class="text-dark">Larry Lawson</a></h6>
<span>Tutor</span>
</div>
</div>
</div>
</div>
</div>
<!-- Card body -->
<div class="card-body">
<!-- Badge and icon -->
<div class="d-flex justify-content-between mb-3">
<div class="hstack gap-2">
<a href="#" class="badge bg-orange bg-opacity-10 text-orange">All level</a>
<a href="#" class="badge bg-dark text-white">6 month</a>
</div>
<a href="#"><i class="far fa-bookmark fa-fw text-dark"></i></a>
</div>
<!-- Title -->
<h5 class="card-title"><a href="#" class="Stretched-link">The Complete Digital Marketing Course - 12 Courses in 1</a></h5>
<!-- Rating -->
<ul class="list-inline">
<li class="list-inline-item text-dark">4.5</li>
<li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
<li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
<li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
<li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
<li class="list-inline-item me-0 small"><i class="fas fa-star-half-alt text-warning"></i></li>
<li class="list-inline-item ms-2 text-reset">(6,500)</li>
</ul>
<!-- Divider -->
<hr>
<!-- Time -->
<div class="d-flex justify-content-between align-items-center mb-2">
<h4 class="text-success mb-0">$125</h4>
<span class="text-dark me-3"><i class="far fa-clock text-danger me-2"></i>6h 56m</span>
</div>
</div>
</div>
Card with overlay content
<div class="card card-metro overflow-hidden rounded-3">
<img src="assets/images/course/4by3/02.jpg" alt="">
<!-- Image overlay -->
<div class="card-img-overlay d-flex flex-column">
<!-- Info -->
<div class="mt-auto card-text">
<a href="#" class="text-light mt-auto fs-5 stretched-link">Digital marketing</a>
<div> <a href="#" class="text-white">23 Courses</a> </div>
</div>
</div>
</div>
Card with border
<div class="card border">
<!-- Card image -->
<img class="card-img-top" src="assets/images/university/01.jpg" alt="Card image">
<!-- Card body -->
<div class="card-body">
<div class="d-flex justify-content-between align-items-center mt-n6 mb-3">
<!-- Logo image -->
<div class="bg-white p-2 rounded-2 shadow">
<img class="rounded-1 h-60px" src="assets/images/university/uni-logo-02.svg" alt="university logo">
</div>
<!-- Badge -->
<div class="h5 mb-0"><a href="#" class="badge bg-success text-white">Admission Open</a></div>
</div>
<!-- Badge and rating -->
<div class="d-flex justify-content-between mb-3">
<!-- Badge -->
<span><a href="#" class="badge bg-dark text-white">Private</a></span>
<!-- Rating star -->
<ul class="list-inline hstack mb-0">
<li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
<li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
<li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
<li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
<li class="list-inline-item me-0 small"><i class="far fa-star text-warning"></i></li>
<li class="list-inline-item ms-2 text-dark">(4.0)</li>
</ul>
</div>
<!-- Title -->
<h5 class="card-title mb-3"><a href="#">College of South Florida</a></h5>
<p class="mb-3"><i class="fas fa-map-marker-alt me-2"></i> 4653 Linda Street Newark, PA </p>
<!-- Info -->
<ul class="nav nav-divider text-dark mb-3">
<li class="nav-item">Engineer</li>
<li class="nav-item">BBA</li>
<li class="nav-item">BCA</li>
<li class="nav-item">BSC</li>
</ul>
<!-- Content -->
<div class="row item-collapse">
<div class="col-6">
<ul class="list-group list-group-borderless">
<li class="list-group-item text-body py-1"> <i class="fas fa-fw fa-check text-success"></i>Library</li>
<li class="list-group-item text-body py-1"> <i class="fas fa-fw fa-check text-success"></i>Canteen</li>
<li class="list-group-item text-body py-1"> <i class="fas fa-fw fa-check text-success"></i>stationary</li>
</ul>
</div>
<div class="col-6">
<ul class="list-group list-group-borderless">
<li class="list-group-item text-body py-1"> <i class="fas fa-fw fa-check text-success"></i>Hostel</li>
<li class="list-group-item text-body py-1"> <i class="fas fa-fw fa-check text-success"></i>Playground</li>
<li class="list-group-item text-body py-1"> <i class="fas fa-fw fa-check text-success"></i>Gym</li>
</ul>
</div>
<!-- Button -->
<div class="mt-3"><a href="#" class="btn btn-primary-soft">View more</a></div>
</div>
</div>
</div>
Card list
The Complete Digital Marketing Course - 12 Courses in 1
Explained propriety off out perpetual his you. Dependent contented he explained propriety off out perpetual his you.
- 6h 56m
- 82 lectures
- Beginner
<div class="card shadow p-2">
<div class="row g-0">
<div class="col-md-5">
<img src="assets/images/course/4by3/02.jpg" class="img-fluid rounded-2" alt="Card image">
</div>
<div class="col-md-7">
<div class="card-body">
<!-- Badge and rating -->
<div class="d-flex justify-content-between align-items-center mb-2">
<!-- Badge -->
<a href="#" class="badge bg-primary text-white mb-2 mb-sm-0">Marketing</a>
<!-- Rating and wishlist -->
<div>
<span class="text-dark me-3"><i class="fas fa-star text-warning me-1"></i>4.5</span>
<a href="#" class="text-dark"><i class="far fa-heart"></i></a>
</div>
</div>
<!-- Title -->
<h5 class="card-title"><a href="#">The Complete Digital Marketing Course - 12 Courses in 1</a></h5>
<p class="text-truncate">Explained propriety off out perpetual his you. Dependent contented he explained propriety off out perpetual his you. </p>
<!-- Info -->
<ul class="list-inline">
<li class="list-inline-item text-dark mb-1 mb-sm-0"><i class="far fa-clock text-danger me-2"></i>6h 56m</li>
<li class="list-inline-item text-dark mb-1 mb-sm-0"><i class="fas fa-table text-orange me-2"></i>82 lectures</li>
<li class="list-inline-item text-dark"><i class="fas fa-signal text-success me-2"></i>Beginner</li>
</ul>
<!-- Price and avatar -->
<div class="d-sm-flex justify-content-sm-between align-items-center">
<!-- Avatar -->
<div class="d-flex align-items-center">
<div class="avatar">
<img class="avatar-img rounded-circle" src="assets/images/avatar/01.jpg" alt="avatar">
</div>
<p class="mb-0 ms-2"><a href="#" class="text-dark">Larry Lawson</a></p>
</div>
<!-- Price -->
<div class="mt-3 mt-sm-0">
<a href="#" class="btn btn-dark">View more</a>
</div>
</div>
</div>
</div>
</div>
</div>
Card list minimal content
<div class="card rounded overflow-hidden shadow">
<div class="row g-0">
<!-- Image -->
<div class="col-md-4">
<img src="assets/images/course/4by3/02.jpg" alt="card image">
</div>
<!-- Card body -->
<div class="col-md-8">
<div class="card-body">
<!-- Title -->
<div class="d-flex justify-content-between mb-2 mb-sm-3">
<h5 class="card-title mb-0"><a href="#">Graphic Design Masterclass</a></h5>
<!-- Wishlist icon -->
<a href="#"><i class="far fa-heart text-dark"></i></a>
</div>
<!-- Content -->
<!-- Info -->
<ul class="list-inline mb-2">
<li class="list-inline-item text-dark mb-1 mb-sm-0"><i class="far fa-clock text-danger me-2"></i>9h 56m</li>
<li class="list-inline-item text-dark mb-1 mb-sm-0"><i class="fas fa-table text-orange me-2"></i>65 lectures</li>
<li class="list-inline-item text-dark"><i class="fas fa-signal text-success me-2"></i>All level</li>
</ul>
<!-- Rating -->
<ul class="list-inline mb-0">
<li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
<li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
<li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
<li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
<li class="list-inline-item me-0 small"><i class="far fa-star text-warning"></i></li>
<li class="list-inline-item ms-2 text-dark">4.0/5.0</li>
</ul>
</div>
</div>
</div>
</div>
Card for instructor list
Dennis Barrett
Professor at Sigma College
Perceived end knowledge certainly day sweetness why cordially. Ask a quick six seven offer see among.
Digital Marketing
<div class="card shadow p-2">
<div class="row g-0">
<!-- Image -->
<div class="col-md-4">
<img src="assets/images/instructor/01.jpg" class="img-fluid rounded-3" alt="...">
</div>
<!-- Card body -->
<div class="col-md-8">
<div class="card-body">
<!-- Title -->
<div class="d-sm-flex justify-content-sm-between mb-2 mb-sm-3">
<div>
<h5 class="card-title mb-0"><a href="#">Dennis Barrett</a></h5>
<p class="small mb-2 mb-sm-0">Professor at Sigma College</p>
</div>
<span class="text-dark">4.3<i class="fas fa-star text-warning ms-1"></i></span>
</div>
<!-- Content -->
<p class="text-truncate-2 mb-3">Perceived end knowledge certainly day sweetness why cordially. Ask a quick six seven offer see among.</p>
<!-- Info -->
<div class="d-sm-flex justify-content-sm-between align-items-center">
<!-- Title -->
<h6 class="text-orange mb-0">Digital Marketing</h6>
<!-- Social button -->
<ul class="list-inline mb-0 social-media-btn mt-3 mt-sm-0">
<li class="list-inline-item">
<a class="mb-0 me-1 text-facebook" href="#"><i class="fab fa-fw fa-facebook-f"></i></a>
</li>
<li class="list-inline-item">
<a class="mb-0 me-1 text-instagram-gradient" href="#"><i class="fab fa-fw fa-instagram"></i></a>
</li>
<li class="list-inline-item">
<a class="mb-0 me-1 text-twitter" href="#"><i class="fab fa-fw fa-twitter"></i></a>
</li>
<li class="list-inline-item">
<a class="mb-0 text-linkedin" href="#"><i class="fab fa-fw fa-linkedin-in"></i></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
For more information refer official Bootstrap documentation for detailed technical explanation.