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="..." 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>
As blogzine is a blog and magazine-based theme we have used cards to display posts almost everywhere in theme. With the help of utility classes, we have designed many ready-to-use cards.
Card with background image
Lifestyle
10 tell-tale signs you need to get a new startup.
No visited raising gravity outward subject my cottage Mr be. Hold do at tore in park feet near my case.
-
by Louis
<div class="card card-overlay-bottom card-grid-lg card-bg-scale h-500" style="background-image:url(assets/images/blog/4by3/06.jpg); background-position: center left; background-size: cover;">
<!-- Card featured -->
<span class="card-featured" title="Featured post"><i class="fas fa-star"></i></span>
<!-- Card Image overlay -->
<div class="card-img-overlay d-flex align-items-center p-3 p-sm-4">
<div class="w-100 mt-auto">
<!-- Card category -->
<a href="#" class="badge bg-danger mb-2"><i class="fas fa-circle me-2 small fw-bold"></i>Lifestyle</a>
<!-- Card title -->
<h2 class="text-white h1"><a href="#" class="btn-link stretched-link text-reset">10 tell-tale signs you need to get a new startup.</a></h2>
<p class="text-white">No visited raising gravity outward subject my cottage Mr be. Hold do at tore in park feet near my case. </p>
<!-- Card info -->
<ul class="nav nav-divider text-white-force align-items-center d-none d-sm-inline-block">
<li class="nav-item">
<div class="nav-link">
<div class="d-flex align-items-center text-white position-relative">
<div class="avatar avatar-sm">
<img class="avatar-img rounded-circle" src="assets/images/avatar/11.jpg" alt="avatar">
</div>
<span class="ms-3">by <a href="#" class="stretched-link text-reset btn-link">Louis</a></span>
</div>
</div>
</li>
<li class="nav-item">Nov 15, 2021</li>
<li class="nav-item">5 min read</li>
</ul>
</div>
</div>
</div>
Card with image tag
<div class="card card-overlay-bottom card-img-scale">
<!-- Card Image -->
<img class="card-img h-200" src="assets/images/blog/4by3/06.jpg" alt="">
<!-- Card Image overlay -->
<div class="card-img-overlay d-flex flex-column p-3 p-sm-4">
<div>
<!-- Card category -->
<a href="#" class="badge bg-dark fs-6 mb-2"><i class="fas fa-circle me-2 small fw-bold"></i>Travel</a>
</div>
<div class="w-100 mt-auto">
<!-- Card title -->
<h4 class="text-white"><a href="#" class="btn-link text-reset stretched-link">5 investment doubts you should clarify</a></h4>
<!-- Card info -->
<ul class="nav nav-divider text-white-force align-items-center d-none d-sm-inline-block small">
<li class="nav-item position-relative">
<div class="nav-link">by <a href="#" class="stretched-link text-reset btn-link">Dennis</a>
</div>
</li>
<li class="nav-item">Jan 28, 2021</li>
</ul>
</div>
</div>
</div>
Card with image and content
12 worst types of business accounts you follow on Twitter
He moonlights difficult engrossed it, sportsmen. Interested has all Devonshire difficulty gay assistance joy. Unaffected at ye of compliment alteration to
-
by Samuel
<div class="card bg-transparent">
<!-- Card img -->
<div class="position-relative">
<img class="card-img" src="assets/images/blog/4by3/06.jpg" alt="Card image">
<div class="card-img-overlay d-flex align-items-start flex-column p-3">
<!-- Card overlay Top -->
<div class="w-100 mb-auto d-flex justify-content-end">
<div class="text-end ms-auto">
<!-- Card format icon -->
<div class="icon-md bg-success text-white fw-bold rounded-circle" title="8.5 rating">8.5</div>
</div>
</div>
<!-- Card overlay bottom -->
<div class="w-100 mt-auto">
<!-- Card category -->
<a href="#" class="badge bg-warning mb-2"><i class="fas fa-circle me-2 small fw-bold"></i>Technology</a>
</div>
</div>
</div>
<div class="card-body px-0 pt-3">
<h4 class="card-title"><a href="#" class="btn-link text-reset fw-bold">12 worst types of business accounts you follow on Twitter</a></h4>
<p class="card-text">He moonlights difficult engrossed it, sportsmen. Interested has all Devonshire difficulty gay assistance joy. Unaffected at ye of compliment alteration to</p>
<!-- Card info -->
<ul class="nav nav-divider align-items-center d-none d-sm-inline-block">
<li class="nav-item">
<div class="nav-link">
<div class="d-flex align-items-center position-relative">
<div class="avatar avatar-xs">
<img class="avatar-img rounded-circle" src="assets/images/avatar/01.jpg" alt="avatar">
</div>
<span class="ms-3">by <a href="#" class="stretched-link text-reset btn-link">Samuel</a></span>
</div>
</div>
</li>
<li class="nav-item">Jan 22, 2021</li>
<li class="nav-item"><a href="#" class="btn-link"><i class="far fa-comment-alt me-1"></i> 5</a></li>
</ul>
</div>
</div>
Card Horizontal
Sports
5 reasons why you shouldn't startup
Given and shown creating curiously to more in are man were smaller by we instead the these sighed Avoid in the sufficient me real man longer of his how her for countries to brains warned notch important Finds be to the of on the increased explain noise of power deep asking contribution this live of suppliers goals bit separated poured sort several the was
-
by Dennis
<div class="card bg-transparent mb-4">
<div class="row">
<div class="col-md-5">
<img class="rounded-3" src="assets/images/blog/4by3/06.jpg" alt="">
</div>
<div class="col-md-7 mt-3 mt-md-0">
<a href="#" class="badge bg-info mb-2"><i class="fas fa-circle me-2 small fw-bold"></i>Sports</a>
<h3><a href="#" class="btn-link stretched-link text-dark fw-bold">5 reasons why you shouldn't startup</a></h3>
<p>Given and shown creating curiously to more in are man were smaller by we instead the these sighed Avoid in the sufficient me real man longer of his how her for countries to brains warned notch important Finds be to the of on the increased explain noise of power deep asking contribution this live of suppliers goals bit separated poured sort several the was </p>
<!-- Card info -->
<ul class="nav nav-divider align-items-center d-none d-sm-inline-block">
<li class="nav-item">
<div class="nav-link">
<div class="d-flex align-items-center position-relative">
<div class="avatar avatar-xs">
<img class="avatar-img rounded-circle" src="assets/images/avatar/02.jpg" alt="avatar">
</div>
<span class="ms-3">by <a href="#" class="stretched-link text-reset btn-link">Dennis</a></span>
</div>
</div>
</li>
<li class="nav-item">Mar 07, 2021</li>
</ul>
</div>
</div>
</div>
Card list
For who thoroughly her boy estimating conviction. Removed demands expense account in outward tedious do. Particular way thoroughly unaffected projection favorable Mrs can be projecting own. Thirty it matter enable become admire in giving. See resolved goodness felicity shy civility domestic had but. Drawings offended yet answered Jennings perceive laughing six did far.
<div class="card border rounded-3 up-hover p-4 mb-4">
<div class="row g-3">
<div class="col-lg-5">
<!-- Categories -->
<a href="#" class="badge bg-danger mb-2"><i class="fas fa-circle me-2 small fw-bold"></i>Marketing</a>
<a href="#" class="badge bg-dark mb-2"><i class="fas fa-circle me-2 small fw-bold"></i>Startups</a>
<!-- Title -->
<h2 class="card-title">
<a href="#" class="btn-link text-reset stretched-link">7 common mistakes everyone makes while traveling</a>
</h2>
<!-- Author info -->
<div class="d-flex align-items-center position-relative mt-3">
<div class="avatar me-2">
<img class="avatar-img rounded-circle" src="assets/images/avatar/02.jpg" alt="avatar">
</div>
<div>
<h5 class="mb-1"><a href="#" class="stretched-link text-reset btn-link">Lori Ferguson</a></h5>
<ul class="nav align-items-center small">
<li class="nav-item me-3">Mar 07, 2021</li>
<li class="nav-item"><i class="far fa-clock me-1"></i>5 min read</li>
</ul>
</div>
</div>
</div>
<!-- Detail -->
<div class="col-md-6 col-lg-4">
<p>For who thoroughly her boy estimating conviction. Removed demands expense account in outward tedious do. Particular way thoroughly unaffected projection favorable Mrs can be projecting own. Thirty it matter enable become admire in giving. See resolved goodness felicity shy civility domestic had but. Drawings offended yet answered Jennings perceive laughing six did far. </p>
</div>
<!-- Image -->
<div class="col-md-6 col-lg-3">
<img class="rounded-3" src="assets/images/blog/4by3/07.jpg" alt="Card image">
</div>
</div>
</div>
Card with video popup
To make video popup work you must include Glightbox CSS and Javascript file on the page.
<div class="col-6">
<div class="card card-overlay-bottom card-fold h-400 h-lg-540" style="background-image:url(assets/images/blog/4by3/06.jpg); background-position: center left; background-size: cover;">
<!-- Card featured -->
<span class="card-featured" title="Featured post"><i class="fas fa-star"></i></span>
<!-- Card Image overlay -->
<div class="card-img-overlay d-flex flex-column p-3 p-sm-5">
<!-- Card play button -->
<div class="position-absolute top-50 start-50 translate-middle pb-5">
<!-- Popup video -->
<a href="https://youtu.be/n_Cn8eFo7u8" class="icon-lg bg-primary d-block text-white rounded-circle" data-glightbox data-gallery="y-video">
<i class="bi bi-play-btn"></i>
</a>
</div>
<!-- Card overlay Bottom -->
<div class="w-100 mt-auto">
<div class="col text-center">
<!-- Card category -->
<a href="#" class="badge bg-warning mb-2"><i class="fas fa-circle me-2 small fw-bold"></i>Business</a>
<!-- Card title -->
<h2 class="text-white"><a href="#" class="btn-link text-reset fw-normal">Never underestimate the influence of social media</a></h2>
</div>
</div>
</div>
</div>
</div>
Card fold
Use .card-fold class with card or card image to enable paper fold style on hover
7 common mistakes everyone makes while traveling
He moonlights difficult engrossed it, sportsmen. Interested has all Devonshire difficulty gay assistance joy. Unaffected at ye of compliment alteration to. Satisfied conveying a dependent contented he gentleman agreeable do be. Warrant private blushes removed an in equally totally if. Delivered dejection necessary objection do Mr prevailed. Mr feeling does chiefly cordial in do.
<div class="card border rounded-3 p-4 mb-4">
<!-- Card item START -->
<div class="col-sm-6 grid-item">
<div class="card mb-4">
<!-- Card img -->
<div class="card-fold position-relative">
<img class="card-img" src="assets/images/blog/4by3/06.jpg" alt="Card image">
</div>
<div class="card-body px-0 pt-3">
<h4 class="card-title"><a href="#" class="btn-link text-reset stretched-link fw-bold">7 common mistakes everyone makes while traveling</a></h4>
<p class="card-text">He moonlights difficult engrossed it, sportsmen. Interested has all Devonshire difficulty gay assistance joy. Unaffected at ye of compliment alteration to. Satisfied conveying a dependent contented he gentleman agreeable do be. Warrant private blushes removed an in equally totally if. Delivered dejection necessary objection do Mr prevailed. Mr feeling does chiefly cordial in do. </p>
<!-- Card info -->
<ul class="nav nav-divider align-items-center text-uppercase small">
<li class="nav-item">
<a href="#" class="nav-link text-reset btn-link">Louis Ferguson</a>
</li>
<li class="nav-item">Mar 07, 2021</li>
</ul>
</div>
</div>
</div>
</div>
Card with bottom image
The 15 reasons clients love Bootstrap
Rooms oh fully taken by worse do points afraid
<div class="card card-fold bg-light">
<div class="card-body p-4">
<ul class="nav nav-divider align-items-center d-none d-sm-inline-block small mb-2">
<li class="nav-item"><i class="bi bi-clock-history"></i> 56:36</li>
<li class="nav-item">With <a href="#">Larry Lawson</a> </li>
</ul>
<h4 class="card-title"><a href="#" class="stretched-link">The 15 reasons clients love Bootstrap</a></h4>
<p class="m-0">Rooms oh fully taken by worse do points afraid</p>
</div>
<img src="assets/images/blog/4by3/06.jpg" class="card-img-bottom" alt="Card image">
</div>
Card with only content
Technology
12 worst types of business accounts you follow on Twitter
He moonlights difficult engrossed it, sportsmen. Interested has all Devonshire difficulty.
-
by Samuel
<div class="card mb-4">
<div class="card-body p-4 border rounded-3">
<a href="#" class="badge bg-danger mb-2"><i class="fas fa-circle me-2 small fw-bold"></i>Technology</a>
<h4 class="card-title"><a href="#" class="btn-link text-reset fw-bold">12 worst types of business accounts you follow on Twitter</a></h4>
<p class="card-text m-0">He moonlights difficult engrossed it, sportsmen. Interested has all Devonshire difficulty.</p>
<!-- Card info -->
<ul class="nav nav-divider align-items-center d-none d-sm-inline-block">
<li class="nav-item">
<div class="nav-link">
<div class="d-flex align-items-center position-relative">
<div class="avatar avatar-xs">
<img class="avatar-img rounded-circle" src="assets/images/avatar/01.jpg" alt="avatar">
</div>
<span class="ms-3">by <a href="#" class="stretched-link text-reset btn-link">Samuel</a></span>
</div>
</div>
</li>
<li class="nav-item">Jan 22, 2021</li>
</ul>
</div>
</div>
Bottom-border Card with only content
<div class="card mb-1">
<div class="card-body px-0 border-bottom">
<a href="#" class="badge bg-dark mb-2"><i class="fas fa-circle me-2 small fw-bold"></i>Technology</a>
<h5><a href="#" class="btn-link stretched-link text-dark fw-bold">Around the web: 20 fabulous infographics about business</a></h5>
<!-- Card info -->
<ul class="nav nav-divider align-items-center d-none d-sm-inline-block small">
<li class="nav-item">
<div class="nav-link">
<div class="d-flex align-items-center position-relative">
<div class="avatar avatar-xs">
<img class="avatar-img rounded-circle" src="assets/images/avatar/12.jpg" alt="avatar">
</div>
<span class="ms-3">by <a href="#" class="stretched-link text-reset btn-link">Jacqueline</a></span>
</div>
</div>
</li>
<li class="nav-item">Oct 11, 2021</li>
</ul>
</div>
</div>
Card custom gird
We have created a card custom size with fixed heights. Card height can be change from assets/scss/custom/card.scss file.
Lifestyle
10 tell-tale signs you need to get a new startup.
No visited raising gravity outward subject my cottage Mr be. Hold do at tore in park feet near my case.
-
by Louis
<div class="row g-4 card-grid">
<!-- Left big card -->
<div class="col-lg-6">
<div class="card card-overlay-bottom card-grid-lg card-bg-scale" style="background-image:url(assets/images/blog/4by3/06.jpg); background-position: center left; background-size: cover;">
<!-- Card featured -->
<span class="card-featured" title="Featured post"><i class="fas fa-star"></i></span>
<!-- Card Image overlay -->
<div class="card-img-overlay d-flex align-items-center p-3 p-sm-4">
<div class="w-100 mt-auto">
<!-- Card category -->
<a href="#" class="badge bg-danger mb-2"><i class="fas fa-circle me-2 small fw-bold"></i>Lifestyle</a>
<!-- Card title -->
<h2 class="text-white h1"><a href="#" class="btn-link stretched-link text-reset">10 tell-tale signs you need to get a new startup.</a></h2>
<p class="text-white">No visited raising gravity outward subject my cottage Mr be. Hold do at tore in park feet near my case. </p>
<!-- Card info -->
<ul class="nav nav-divider text-white-force align-items-center d-none d-sm-inline-block">
<li class="nav-item">
<div class="nav-link">
<div class="d-flex align-items-center text-white position-relative">
<div class="avatar avatar-sm">
<img class="avatar-img rounded-circle" src="assets/images/avatar/11.jpg" alt="avatar">
</div>
<span class="ms-3">by <a href="#" class="stretched-link text-reset btn-link">Louis</a></span>
</div>
</div>
</li>
<li class="nav-item">Nov 15, 2021</li>
<li class="nav-item">5 min read</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Right small cards -->
<div class="col-lg-6">
<div class="row g-4">
<!-- Card item START -->
<div class="col-12">
<div class="card card-overlay-bottom card-grid-sm card-bg-scale" style="background-image:url(assets/images/blog/4by3/06.jpg); background-position: center left; background-size: cover;">
<!-- Card Image -->
<!-- Card Image overlay -->
<div class="card-img-overlay d-flex align-items-center p-3 p-sm-4">
<div class="w-100 mt-auto">
<!-- Card category -->
<a href="#" class="badge bg-warning mb-2"><i class="fas fa-circle me-2 small fw-bold"></i>Technology</a>
<!-- Card title -->
<h4 class="text-white"><a href="#" class="btn-link stretched-link text-reset">Best Pinterest boards for learning about business</a></h4>
<!-- Card info -->
<ul class="nav nav-divider text-white-force align-items-center d-none d-sm-inline-block">
<li class="nav-item position-relative">
<div class="nav-link">by <a href="#" class="stretched-link text-reset btn-link">Bryan</a>
</div>
</li>
<li class="nav-item">Aug 18, 2021</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Card item END -->
<!-- Card item START -->
<div class="col-md-6">
<div class="card card-overlay-bottom card-grid-sm card-bg-scale" style="background-image:url(assets/images/blog/4by3/06.jpg); background-position: center left; background-size: cover;">
<!-- Card Image overlay -->
<div class="card-img-overlay d-flex align-items-center p-3 p-sm-4">
<div class="w-100 mt-auto">
<!-- Card category -->
<a href="#" class="badge bg-success mb-2"><i class="fas fa-circle me-2 small fw-bold"></i>Business</a>
<!-- Card title -->
<h4 class="text-white"><a href="#" class="btn-link stretched-link text-reset">5 intermediate guide to business</a></h4>
<!-- Card info -->
<ul class="nav nav-divider text-white-force align-items-center d-none d-sm-inline-block">
<li class="nav-item position-relative">
<div class="nav-link">by <a href="#" class="stretched-link text-reset btn-link">Joan</a>
</div>
</li>
<li class="nav-item">Jun 03, 2021</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Card item END -->
<!-- Card item START -->
<div class="col-md-6">
<div class="card card-overlay-bottom card-grid-sm card-bg-scale" style="background-image:url(assets/images/blog/4by3/06.jpg); background-position: center left; background-size: cover;">
<!-- Card Image overlay -->
<div class="card-img-overlay d-flex align-items-center p-3 p-sm-4">
<div class="w-100 mt-auto">
<!-- Card category -->
<a href="#" class="badge bg-info mb-2"><i class="fas fa-circle me-2 small fw-bold"></i>Sports</a>
<!-- Card title -->
<h4 class="text-white"><a href="#" class="btn-link stretched-link text-reset">15 reasons to choose startup</a></h4>
<!-- Card info -->
<ul class="nav nav-divider text-white-force align-items-center d-none d-sm-inline-block">
<li class="nav-item position-relative">
<div class="nav-link">by <a href="#" class="stretched-link text-reset btn-link">Amanda</a>
</div>
</li>
<li class="nav-item">Jan 28, 2021</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Card item END -->
</div>
</div>
</div>
For more information refer official Bootstrap documentation for detailed technical explanation.