Cards
Last updated
Last updated
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.
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.
To understand how Bootstrap cards are structured, please go the official documentation. We have used the default cards and built on top of them for specific card. The easiest way to get started is you choose the card that is right for you can edit it with your content. Below you will see example with the basic card categories.
Cards with an image on top
<div class="card blog-card-1">
<img class="card-img-top" src="assets/media/img/blog/blog_card_1.jpg" alt="Card image cap">
<div class="card-img-overlay">
<a href="#" class="btn btn-xs btn-white-tan float-left">Science</a>
</div>
<div class="card-body">
<h5 class="card-title">Looking at Your Home Planet from Mars</h5>
<p class="card-text">Greetings Earthlings! This is your planet and its moon as seen from Mars, some 127 million miles away.</p>
</div>
<div class="card-footer d-flex justify-content-between">
<div class="p-2 date">
Jan, 9, 11:45 am
</div>
<div class="p-2 stats">
<span class="stat">
<i class="fas fa-eye"></i>
925
</span>
<span class="stat">
<i class="fas fa-comment"></i> 25
</span>
</div>
</div>
</div>Cards with an image background
<div class="card card-full-image card-black" style="background-image: url('assets/media/img/blog/blog_card_3.jpg')">
<div class="card-content">
<div class="card-header d-flex justify-content-between">
<div class="p-2">
<a href="#" class="btn btn-xs btn-link btn-white">Music</a>
</div>
<div class="p-2">
<a href="#" class="btn btn-xs btn-link btn-white"><i class="fas fa-ellipsis-h"></i></a>
</div>
</div>
<div class="card-body clearfix">
<h5><i>Review:</i></h5>
<h5>The First Concert at the New Elbphilharmonie in Germany</h5>
<button class="btn btn-link btn-pink float-left">
Read More
<span class="icon icon-arrow-right"></span>
</button>
</div>
<div class="card-footer d-flex justify-content-between">
<div class="p-2 date">
Jan, 9, 11:45 am
</div>
<div class="p-2 stats">
<span class="stat">
<i class="fas fa-eye"></i>
925
</span>
<span class="stat">
<i class="fas fa-comment"></i>25
</span>
</div>
</div>
</div>
</div>Cards with carousel
<div class="card card-carousel-1 card-white">
<div id="carouselExampleIndicators" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="./assets/media/img/blog/blog_card_2.jpg" alt="First slide">
<div class="carousel-caption d-md-block">
<div class="header d-flex justify-content-between">
<div class="p-2">
<a href="#" class="btn btn-xs btn-link">Fashion & Style</a>
</div>
<div class="p-2">
<a href="#" class="btn btn-sm btn-link btn-next">
<span class="icon icon-arrow-right"></span>
</a>
</div>
</div>
<div class="content">
<h3>After Fashion, Hedi Slimane Turns to Photography Full Time</h3>
<p>I started at 11 with black-and-white photography. It has always been a natural and defining part of my life.</p>
</div>
</div>
</div>
<div class="carousel-item">...
</div>
<div class="carousel-item">...
</div>
</div>
</div>
<div class="card-footer d-flex justify-content-between">
<div class="p-2 date">
Jan, 9, 11:45 am
</div>
<div class="p-2 stats">
<span class="stat">
<i class="fas fa-eye"></i>
925
</span>
<span class="stat">
<i class="fas fa-comment"></i>25
</span>
</div>
</div>
</div>Cards with tabs
<div class="card card-list-tabs">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Most Views</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Recent</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Comments</a>
</li>
</ul>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">
<div class="row">
<div class="col-4 col-md-3">
<img class="img-responsive img-round" src="assets/media/img/blog/thumbnail_1.jpg">
</div>
<div class="col-7 col-md-8">
<p class="text-muted date">Jan, 9, 11:45 am</p>
<a href="#" class="blog-title">Rye, a Grain With Ancient Roots, Is Rising Again</a>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-4 col-md-3">
<img class="img-responsive img-round" src="assets/media/img/blog/thumbnail_2.jpg">
</div>
<div class="col-7 col-md-8">
<p class="text-muted date">Dec, 27, 9:45 am</p>
<a href="#" class="blog-title">10 essential tech gadgets to take on your travels</a>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-4 col-md-3">
<img class="img-responsive img-round" src="assets/media/img/blog/thumbnail_3.jpg">
</div>
<div class="col-7 col-md-8">
<p class="text-muted date">Jan, 24, 9:56 am</p>
<a href="#" class="blog-title">Endangered Species and the Stuff We Buy, All Mapped Out</a>
</div>
</div>
</li>
</ul>
<div class="card-footer d-flex justify-content-between">
<div class="p-2 dots">
<ol class="indicators">
<li class="active">
<a href="#"></a>
</li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ol>
</div>
<div class="p-2">
<a href="#" class="btn btn-link btn-navy">
View All
<span class="icon icon-arrow-right"></span>
</a>
</div>
</div>
</div>Horizontal Cards
<div class="card card-horizontal">
<div class="row">
<div class="col-md-8">
<div class="image" style="background-image: url('assets/media/img/blog/blog_card_7.jpg')">
<div class="middle-tag">
<a href="#" class="btn btn-xs btn-link">Movies</a>
</div>
</div>
</div>
<div class="col-md-4 text">
<h4 class="libre text-pinkish-tan">House <i>of</i> Cards</h4>
<a href="#" class="btn btn-sm float-left"> Read Reviews</a>
<div class="stats">
<span class="stat">
<i class="fas fa-eye text-muted"></i>
925
</span>
<span class="stat">
<i class="fas fa-comment text-muted"></i>25
</span>
</div>
</div>
</div>
</div>Cards with an image on top
<div class="card product-card-1">
<img class="card-img-top" src="assets/media/img/commerce/commerce_card_1.jpg" alt="Card image cap" />
<div class="tag">
<a href="#" class="btn btn-xs btn-navy float-left">New</a>
</div>
<div class="card-body text-center">
<h5 class="card-title">B&O Play A9</h5>
<p class="price"><i>$2 299</i></p>
<a href="#cart" class="btn btn-sm btn-border">Buy Now</a>
</div>
</div>Cards with carousel
<div class="card product-carousel-1">
<div id="carousel-1" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#carousel-1" data-slide-to="0" class="active"></li>
<li data-target="#carousel-1" data-slide-to="1"></li>
<li data-target="#carousel-1" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="./assets/media/img/commerce/commerce_card_2.jpg" alt="First slide">
<div class="carousel-caption d-md-block">
<div class="header d-flex justify-content-between">
<div>
<a href="#" class="btn btn-xs btn-white">Best Sellers</a>
</div>
</div>
<div class="content">
<div class="row">
<div class="col-12 col-md-6">
<h3>Pinstripe Poplin Blouse</h3>
<p>Long pinstripe jacket. Side flap details. Central button fastening. Contrast lining.</p>
<div class="buy">
<span class="price">39.99 USD</span>
<a href="#" class="btn btn-sm">Buy Now</a>
</div>
</div>
<div class="d-none d-md-block col-md-6">
<div class="arrows text-right">
<a href="#" class="btn btn-white-navy btn-big-prev prev-1">
<span class="icon icon-arrow-left"></span>
</a>
<a href="#" class="btn btn-white-navy btn-big-next next-1">
<span class="icon icon-arrow-right"></span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">....</div>
<div class="carousel-item">...</div>
</div>
</div>
</div>Horizontal Cards
<div class="card product-card-horizontal-2">
<div class="card-body">
<div class="row">
<div class="col-md-6">
<div class="image">
<img src='assets/media/img/commerce/commerce_card_5.jpg' alt="Product 1">
</div>
</div>
<div class="col-md-6">
<div class="details">
<h5>Nike SFB Leather 6’</h5>
<p><i>Men’s Boot</i></p>
<div class="buy">
<span class="price">$180</span>
<a href="#" class="btn btn-sm btn-navy"> Buy Now</a>
</div>
</div>
</div>
</div>
</div>
</div><div class="accordion commerce-accordion" id="categories-accordion">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<div class="d-flex justify-content-between">
<div>
Women
</div>
<div class="sign">
<span class="sign-1">+</span>
<span class="sign-2">-</span>
</div>
</div>
</button>
</h5>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#categoroes-accordion">
<div class="card-body" style="background-image: url('assets/media/img/commerce/commerce_card_13.jpg');" >
<ul class="list-unstyled">
<a href="#s"><li>Shirts</li></a>
<a href="#s"><li>Tops</li></a>
<a href="#s"><li>Outerwear</li></a>
<a href="#s"><li>Bottoms</li></a>
<a href="#s"><li>Denim</li></a>
<a href="#s"><li>Underwear</li></a>
</ul>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseOne">
<div class="d-flex justify-content-between">
<div>
Men
</div>
<div class="sign">
<span class="sign-1">+</span>
<span class="sign-2">-</span>
</div>
</div>
</button>
</h5>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwoe" data-parent="#categories-accordion">
<div class="card-body" style="background-image: url('assets/media/img/commerce/commerce_card_13.jpg');" >
<ul class="list-unstyled">...</ul>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="true" aria-controls="collapseOne">
<div class="d-flex justify-content-between">
<div>
Kids
</div>
<div class="sign">
<span class="sign-1">+</span>
<span class="sign-2">-</span>
</div>
</div>
</button>
</h5>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body" style="background-image: url('assets/media/img/commerce/commerce_card_13.jpg');" >
<ul class="list-unstyled">...</ul>
</div>
</div>
</div>
</div>The media cards are built using the Plyr library. There are 2 types of media cards: audio and video.
Here is an example of an audio card:
<!-- html -->
<div class="card blog-card-2 card-audio-1">
<img class="card-img-top" src="./assets/media/img/video/audio_1.jpg" alt="Card image cap">
<div class="card-img-overlay">
<div class="card-header d-flex justify-content-between">
<div class="p-2">
<a href="#" class="btn btn-xs btn-white tag">Best Sellers</a>
</div>
<div class="p-2">
<a href="#" class="btn btn-xs btn-link btn-white more"><i class="fas fa-ellipsis-h"></i></a>
</div>
</div>
</div>
<div class="card-body">
<div class="player">
<audio id="player1" controls>
<source src="assets/media/audio/kendrick.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
</div>
<h5 class="track">Life Itself</h5>
<p class="artist">Glass Animals</p>
</div>
</div>//javascript needed to initialise the player
const player1 = new Plyr('#player1',{
controls: ['rewind', 'play', 'fast-forward', 'progress', 'current-time', 'duration']
});And here is an example of a video card:
<!-- html -->
<div class="card card-video-1">
<div class="card-header d-flex justify-content-between">
<div class="title">
<h5>Life in the Ocean</h5>
<p>National Geographic</p>
</div>
<div class="more">
<a href="#" class="btn btn-link btn-white"><i class="fas fa-ellipsis-h"></i></a>
</div>
</div>
<div id="vplayer1" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY"></div>
</div>//javascript needed to initialise the player
const vplayer1 = new Plyr('#vplayer1',{
controls: ['rewind', 'play', 'fast-forward', 'progress', 'current-time', 'duration', 'mute', 'volume', 'fullscreen']
});If you want your login or sign up to be put in a container, the easiest way is to use a card. Here is an example for a login card. Be sure to add the .card-login-white class to the card in order to get the styling.
<div class="card card-login-white">
<div class="card-header text-center bg-transparent">
<h5 class="card-title montserrat"><b>Log In</b></h5>
</div>
<form>
<div class="card-body">
<div class="form-group">
<label for="inpute">Email</label>
<input type="text" class="form-control" id="inpute">
</div>
<div class="form-group">
<label for="inputp">Password</label>
<input type="password" class="form-control" id="inputp">
</div>
<div class="d-flex justify-content-between">
<div>
<a href="#" class="simple-link">Forgot Password?</a>
</div>
<div>
<a href="#" class="simple-link">Sign Up</a>
</div>
</div>
<button type="submit" class="btn btn-sm btn-block btn-black">Log In</button>
</div>
<div class="card-footer bg-transparent login-footer">
<div class="row social-buttons">
<div class="col-12 col-md-6">
<a href="#a" class="btn btn-block btn-sm btn-facebook"><i class="fab fa-facebook-f"></i></a>
</div>
<div class="col-12 col-md-6">
<a href="#a" class="btn btn-block btn-sm btn-twitter"><i class="fab fa-twitter"></i></a>
</div>
</div>
</div>
</form>
</div>
