Cards
Our cards provide a flexible and extensible content container with multiple variants and options.
Open Bootstrap DocsExample
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="holder.js/600x400?auto=yes" alt="Card image cap" class="img-fluid">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text....</p>
<a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
</div>
</div>Metadata
Special title treatment
2 hrs ago
With supporting text below as a natural lead-in to additional content.
Go somewhereSpecial title treatment
- 50
- 750
With supporting text below as a natural lead-in to additional content.
Go somewhere<div class="row">
<div class="col-lg-6">
<div class="card">
<div class="card-body">
<h5 class="heading heading-5 strong-600">Special title treatment</h5>
<h6 class="text-muted mb-4">2 hrs ago</h6>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card">
<div class="card-body">
<h5 class="heading heading-5 strong-600">Special title treatment</h5>
<ul class="list-inline mb-4">
<li class="list-inline-item pr-2">
<a href="#"><i class="fas fa-heart mr-1"></i> 50</a>
</li>
<li class="list-inline-item">
<i class="fas fa-eye text-muted mr-1"></i> 750
</li>
</ul>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div><div class="row">
<div class="col-md-6">
<div class="card">
<div class="card-body">
<h5 class="heading heading-5 strong-600">Special title treatment</h5>
<h6 class="heading heading-sm strong-400 text-muted mb-4">
2 hrs ago
</h6>
<p class="card-text">With supporting text below...</p>
<a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
</div>
<div class="card-footer">
<div class="row align-items-center">
<div class="col">
<span class="avatar avatar-sm bg-purple">JD</span>
<span class="avatar-content">David Wally</span>
</div>
<div class="col text-right text-xs-right">
<ul class="list-inline mb-0">
<li class="list-inline-item pr-2">
<a href="#"><i class="fas fa-heart mr-1"></i> 50</a>
</li>
<li class="list-inline-item">
<i class="fas fa-eye text-muted mr-1"></i> 750
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card">
<div class="card-body">
<h5 class="heading heading-5 strong-600">Special title treatment</h5>
<h6 class="heading heading-sm strong-400 text-muted mb-4">
2 hrs ago
</h6>
<p class="card-text">With supporting text below...</p>
<a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
</div>
<div class="card-footer">
<div class="row align-items-center">
<div class="col">
<span class="avatar avatar-sm bg-purple">JD</span>
<span class="avatar-content">David Wally</span>
</div>
<div class="col text-right text-xs-right">
<ul class="list-inline mb-0">
<li class="list-inline-item pr-2">
2 hrs ago
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>Actions
Favorite post
With supporting text below as a natural lead-in to additional content.
Love & bookmark post
With supporting text below as a natural lead-in to additional content.
<div class="row">
<div class="col-lg-6">
<div class="card">
<div class="card-header">
<div class="row align-items-center">
<div class="col-8">
<h5 class="heading h5 mb-0">Favorite post</h5>
</div>
<div class="col-4">
<div class="card-icon-actions text-right">
<a href="#" class="favorite active" data-toggle="tooltip" data-original-title="Save to favorites"><i class="fas fa-star"></i></a>
</div>
</div>
</div>
</div>
<div class="card-body">
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer">
<div class="row align-items-center">
<div class="col-6">
<a href="#" class="btn btn-sm btn-primary">Action button</a>
</div>
<div class="col-6 text-right">
<span class="text-muted">2 hrs ago</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card">
<div class="card-header">
<div class="row align-items-center">
<div class="col-8">
<h5 class="heading h5 mb-0">Love & bookmark post</h5>
</div>
<div class="col-4">
<div class="card-icon-actions text-right">
<a href="#" class="favorite" data-toggle="tooltip" data-original-title="Save as favorite"><i class="fas fa-star"></i></a>
<a href="#" class="love active" data-toggle="tooltip" data-original-title="Love this"><i class="fas fa-heart"></i></a>
</div>
</div>
</div>
</div>
<div class="card-body">
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer">
<div class="row align-items-center">
<div class="col-6">
<a href="#" class="btn btn-sm btn-primary">Action button</a>
</div>
<div class="col-6 text-right">
<span class="text-muted">2 hrs ago</span>
</div>
</div>
</div>
</div>
</div>
</div>Commentable
JD
Bettie Mavis
New York, US23 likes
With supporting text below as a natural lead-in to additional content.
<div class="row">
<div class="col-lg-6">
<div class="card">
<div class="card-header py-4">
<div class="d-flex align-items-center">
<span class="avatar avatar-sm bg-purple">JD</span>
<div class="avatar-content">
<h5 class="h6 mb-0">Bettie Mavis</h5>
<small class="d-block text-muted">New York, US</small>
</div>
</div>
</div>
<div class="card-image">
<img src="holder.js/600x400?auto=yes" class="img-fluid">
</div>
<div class="card-body">
<div class="row mb-1">
<div class="col">
<div class="card-icon-actions card-icon-actions-lg">
<a href="#" class="love active"><i class="fas fa-heart"></i></a>
<a href="#"><i class="fas fa-comment"></i></a>
</div>
</div>
<div class="col">
<div class="card-icon-actions card-icon-actions-lg text-right">
<a href="#"><i class="fas fa-bookmark"></i></a>
</div>
</div>
</div>
<h6 class="heading h6 mb-3">23 likes</h6>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer">
<div class="row ">
<div class="col-10">
<form class="card-comment-box" role="form">
<textarea rows="1" class="form-control textarea-autosize" placeholder="Add a comment..."></textarea>
</form>
</div>
<div class="col-2 text-right">
<div class="card-icon-actions card-icon-actions-lg">
<a href="#" data-toggle="dropdown" aria-expanded="false">
<i class="fas fa-ellipsis-h"></i>
</a>
<div class="dropdown-menu py-0 text-center">
<a class="dropdown-item" href="#">Got to post</a>
<a class="dropdown-item" href="#">Repost inappropriate</a>
<a class="dropdown-item" href="#">Embed</a>
<a class="dropdown-item" href="#">Cancel</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>List groups
Simple list group
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
<div class="row">
<div class="col-md-6">
<div class="card">
<div class="card-header py-4">
<h5 class="heading h5 font-weight-500 mb-0">Simple list group</h5>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
</div>
<div class="col-md-6">
<div class="card">
<div class="card-header py-4">
<div class="d-flex align-items-center">
<h5 class="heading h5 mb-0">Add team members</h5>
</div>
</div>
<div class="list-group list-group-flush">
<a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
<div class="list-group-img">
<span class="avatar bg-purple">JD</span>
</div>
<div class="list-group-content">
<div class="list-group-heading">Johnyy Depp <small>10:05 PM</small></div>
<p class="text-sm">Lorem ipsum dolor sit amet consectetur adipiscing eiusmod tempor</p>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
<div class="list-group-img">
<span class="avatar bg-pink">TC</span>
</div>
<div class="list-group-content">
<div class="list-group-heading">Tom Cruise <small>11:30 PM</small></div>
<p class="text-sm">Lorem ipsum dolor sit amet consectetur adipiscing eiusmod tempor</p>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
<div class="list-group-img">
<span class="avatar bg-blue">WS</span>
</div>
<div class="list-group-content">
<div class="list-group-heading">Will Smith <small>15:45 PM</small></div>
<p class="text-sm">Lorem ipsum dolor sit amet consectetur adipiscing eiusmod tempor</p>
</div>
</a>
</div>
<div class="card-footer py-2 border-top-0">
<form class="card-comment-box" role="form">
<div class="row align-items-center">
<div class="col-8">
<input class="form-control" placeholder="e.g @willsmith">
</div>
<div class="col-4 text-right">
<button type="button" class="btn btn-sm btn-success btn-icon-only rounded-circle">
<span class="btn-inner--icon"><i class="fas fa-check"></i></span>
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>Card with overlay
<div class="card text-white border-0 overflow-hidden">
<img class="card-img" src="../assets/img/backgrounds/img-3.jpg" alt="Card image">
<span class="mask bg-primary alpha-7"></span>
<div class="card-img-overlay d-flex align-items-center">
<div class="col-lg-8">
<h5 class="heading h3 text-white">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text">Last updated 3 mins ago</p>
</div>
</div>
</div>Colored cards
Theme as framework
We know how much you love Bootstrap components. That's why we've customized, and also, introduced dozens of completely new utilities, components, and plugins.
Learn moreEven more components
We know how much you love Bootstrap components. That's why we've customized, and also, introduced dozens of completely new utilities, components, and plugins.
Learn more<div class="row">
<div class="col-md-6">
<div class="card bg-primary text-white px-4 py-4 border-0 mb-0">
<div class="card-body">
<h1 class="heading h3 text-white">Theme as framework</h1>
<p class="mt-4">
We know how much you love Bootstrap components. That's why we've customized, and also, introduced dozens of completely new utilities, components, and plugins.
</p>
<a href="#" class="btn btn-secondary mt-4">Learn more</a>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card bg-secondary px-4 py-4 border-0 mb-0">
<div class="card-body">
<h1 class="heading h3">Even more components</h1>
<p class="mt-4">
We know how much you love Bootstrap components. That's why we've customized, and also, introduced dozens of completely new utilities, components, and plugins.
</p>
<a href="#" class="btn btn-primary mt-4">Learn more</a>
</div>
</div>
</div>
</div>Pricing cards
Starter
$19
per month- Up to 5 users
- Basic support on Github
- Monthly updates
- Free cancelation
Small business
$49
per month- Up to 15 users
- Premium email support
- Weekly updates
- Free cancelation
<div class="row">
<div class="col-md-6">
<div class="card card-pricing text-center px-3 mb-4">
<div class="card-header py-4">
<h5 class="mb-4">Starter</h5>
<h1 class="display-4 text-primary text-center">$19</h1>
<span class="h6 text-muted">per month</span>
</div>
<div class="card-body">
<ul class="list-unstyled mb-4">
<li>Up to 5 users</li>
<li>Basic support on Github</li>
<li>Monthly updates</li>
<li>Free cancelation</li>
</ul>
<button type="button" class="btn btn-primary mb-3">Start free trial</button>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card card-pricing popular text-center px-3 mb-4 z-depth-3">
<div class="card-header py-4">
<h5 class="mb-4">Small business</h5>
<h1 class="display-4 text-primary text-center">$49</h1>
<span class="h6 text-muted">per month</span>
</div>
<div class="card-body">
<ul class="list-unstyled mb-4">
<li>Up to 15 users</li>
<li>Premium email support</li>
<li>Weekly updates</li>
<li>Free cancelation</li>
</ul>
<button type="button" class="btn btn-primary mb-3">Start free trial</button>
</div>
</div>
</div>
</div>Icon cards
Latest Bootstrap framework (v4.0.0)
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.
Latest Bootstrap framework (v4.0.0)
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.
<div class="row">
<div class="col-md-6">
<div class="card bg-primary">
<div class="card-body py-5">
<div class="d-flex align-items-start">
<div class="icon icon-lg">
<i class="fab fa-twitter text-white"></i>
</div>
<div class="icon-text">
<h5 class="heading text-white">Latest Bootstrap framework <small>(v4.0.0)</small></h5>
<p class="text-white">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card bg-dark">
<div class="card-body py-5">
<div class="d-flex align-items-start">
<div class="icon icon-lg">
<i class="fab fa-twitter text-white"></i>
</div>
<div class="icon-text">
<h5 class="heading text-white">Latest Bootstrap framework <small>(v4.0.0)</small></h5>
<p class="text-white">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
</div>
</div>
</div>
</div>
</div>
</div>Variations
This is a card title
Each theme comes with updates for the life of the theme. This means you'll never pay for any bug-fixes and compatibility upgrades for your theme, ever.
Card button<div class="card">
<img alt="Image placeholder" src="../assets/img/prv/img-1-800x600.jpg" class="card-img-top">
<div class="card-body">
<h5 class="heading h5 mb-1">
<span class="card-title">This is a card title</span>
<small class="text-muted"></small>
</h5>
<p class="card-text">Each theme comes with updates for the life of the theme. This means you'll never pay for any bug-fixes and compatibility upgrades for your theme, ever.</p>
<a href="#" class="btn btn-sm btn-primary">Card button</a>
</div>
</div>
This is a card title
Each theme comes with updates for the life of the theme. This means you'll never pay for any bug-fixes and compatibility upgrades for your theme, ever.
Card button<div class="card border-0" data-animate-hover="1">
<div class="animate-this">
<img alt="Image placeholder" class="rounded z-depth-3 img-fluid" src="../assets/img/prv/img-2-800x600.jpg">
</div>
<div class="pt-4">
<h5 class="card-title">This is a card title</h5>
<p class="card-text">Each theme comes with updates for the life of the theme. This means you'll never pay for any bug-fixes and compatibility upgrades for your theme, ever.</p>
<a href="#" class="btn btn-sm btn-primary">Card button</a>
</div>
</div>Download Purpose
Purpose is a great free UI package based on Bootstrap 4 that includes the most important components and features.
<div class="card">
<div class="card-body py-5">
<div class="d-flex align-items-start">
<div class="icon">
<i class="fas fas fa-heart"></i>
</div>
<div class="icon-text">
<h5>Download Purpose</h5>
<p class=" mb-0">Purpose is a great free UI package based on Bootstrap 4 that includes the most important components and features.</p>
</div>
</div>
</div>
</div>
<div class="card shadow--hover">
<div class="px-5 py-5">
<img alt="Image placeholder" src="../assets/img/icons/dusk/png/desktop-download.png" class="img-fluid">
</div>
<div class="px-5 pb-5">
<h5>Download Purpose</h5>
<p class=" mt-2">Purpose is a great free UI package based on Bootstrap 4 that includes the most important components and features.</p>
<div class="mt-4">
<a href="#" class="badge badge-lg badge-pill badge-info">colors</a>
<a href="#" class="badge badge-lg badge-pill badge-info">theme</a>
<a href="#" class="badge badge-lg badge-pill badge-info">gulp</a>
</div>
</div>
</div>
Responsive design
Some quick example text to build on the card title and make up the bulk of the card's content.
<div>
<div class="icon mb-4">
<img alt="Image placeholder" src="../assets/img/icons/dusk/png/toolbar-top.png" class="img-fluid">
</div>
<h5>Responsive design</h5>
<p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>