Card Title
This is a wider card with supporting text below as a natural lead-in to additional content.
Last updated 3 mins ago
Bootstrap's cards provide a flexible and extensible content container with multiple variants and options.
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. This is easily customized with our various sizing options.
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: 20rem;">
<img class="card-img-top" data-src=".../100px180/" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<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="javascript:;" class="btn btn-primary">Go somewhere</a>
</div>
</div>
Cards support a wide variety of content, including images, text, list groups, links, and more. Below are examples of what’s supported.
Yesterday, as Facebook launched its news reader app Paper, design-focused startup FiftyThree called out Facebook...
German media giant Axel Springer has announced it’s acquiring online business news publication Business Inside...
Our brains are finely attuned to distraction, so today's digital environment makes it especially hard to focus...
Our brains are finely attuned to distraction, so today's digital environment makes it especially hard to focus...
<div class="row">
<div class="col-md-4">
<div class="card card-blog" data-header="pattern">
<a href="javascript:;">
<img class="img pattern rounded" src="../../../assets/img/ill/p2.svg">
</a>
<div class="card-body">
<h6 class="card-category text-danger">
<i class="ni ni-badge"></i> Features
</h6>
<h5 class="card-title">
<a href="javascript:;">FiftyThree Files For Paper</a>
</h5>
<p class="card-description">
Yesterday, as Facebook launched its news reader app Paper, design-focused startup FiftyThree called out Facebook...
</p>
</div>
<div class="card-footer">
<div class="author">
<img src="../../../assets/img/faces/team-3.jpg" alt="..." class="avatar img-raised">
<span>Johana Doe</span>
</div>
<div class="stats stats-right">
<i class="ni ni-favourite-28"></i> 10.4K ·
<i class="ni ni-archive-2"></i> 425
</div>
</div>
</div>
<div class="card bg-gradient-danger">
<div class="card-body pb-0">
<h6 class="category-social text-white text-uppercase">
<i class="fa fa-fire"></i> Focus
</h6>
<p class="lead text-white my-0">
Our brains are finely attuned to distraction
</p>
</div>
<a href="javascript:;">
<img class="img pattern rounded" src="../../../assets/img/ill/p51.svg">
</a>
</div>
</div>
<div class="col-md-4">
<div class="card card-blog" data-header="skew">
<div class="card-header bg-yellow">
<div class="card-image">
<img class="card-img-top" src="../../../assets/img/ill/inn.svg">
</div>
</div>
<div class="card-body">
<h6 class="card-category">
<i class="ni ni-paper-diploma"></i>
Business
</h6>
<h5 class="card-title">
<a href="javascript:;">Springer Spends $343M To Buy Business Insider</a>
</h5>
<p class="card-description">
German media giant Axel Springer has announced it’s acquiring online business news publication Business Inside...
</p>
</div>
</div>
<div class="card text-white bg-default">
<img class="card-img" src="../../../assets/img/ill/inn.svg" alt="Card image">
<div class="card-img-overlay d-flex align-items-center">
<div class="content">
<h5 class="h2 card-title text-white mb-2">Card Title</h5>
<p class="card-description">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
<p class="card-text text-sm font-weight-bold">Last updated 3 mins ago</p>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card card-blog bg-info">
<img class="img pattern rounded" src="../../../assets/img/ill/p7.svg">
<div class="card-body">
<h4 class="display-4 text-white">Here Be Dragons</h4>
<p class="lead text-white mt-0">Our brains are finely attuned to distraction, so today's digital environment makes it especially hard to focus...</p>
</div>
</div>
<div class="card card-blog bg-primary" data-image="path">
<div class="card-image">
<img class="img rounded" src="../../../assets/img/ill/p22.png">
</div>
<div class="card-body pt-0">
<h6 class="category text-white">
<i class="ni ni-atom"></i>
Focus
</h6>
<h5 class="card-title">
<a class="text-white" href="javascript:;">Stay focused</a>
</h5>
<p class="card-description text-white">
Our brains are finely attuned to distraction, so today's digital environment makes it especially hard to focus...
</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="card card-profile">
<div class="card-header bg-info" style="background-image: url('../../../assets/img/ill/inn.svg')">
<div class="card-avatar">
<a href="javascript:;">
<img class="img img-raised rounded-circle" src="../../../assets/img/faces/team-4.jpg">
</a>
</div>
</div>
<div class="card-body pt-0">
<div class="d-flex justify-content-between">
<a href="javascript:;" class="btn btn-sm btn-info mr-4 mt-3">Connect</a>
<a href="javascript:;" class="btn btn-sm btn-default float-right mt-3">Message</a>
</div>
<div class="row">
<div class="col">
<div class="card-profile-stats d-flex justify-content-center">
<div>
<span class="heading">22</span>
<span class="description">Friends</span>
</div>
<div>
<span class="heading">10</span>
<span class="description">Photos</span>
</div>
<div>
<span class="heading">89</span>
<span class="description">Comments</span>
</div>
</div>
</div>
</div>
<div class="text-center">
<h5 class="h4">
Daisy Paisley<span class="font-weight-light">, 28</span>
</h5>
<div class="font-weight-300">
<i class="ni location_pin mr-2"></i>Bucharest, Romania
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card card-profile" data-image="profile-image">
<div class="card-header">
<div class="card-image">
<div class="dropdown">
<button type="button" class="btn btn-link dropdown-toggle btn-icon-only" data-toggle="dropdown" aria-expanded="false">
<i class="ni ni-settings-gear-65"></i>
</button>
<div class="dropdown-menu dropdown-menu-right" x-placement="bottom-end">
<a class="dropdown-item" href="javascript:;">Edit Profile</a>
<a class="dropdown-item" href="javascript:;">Settings</a>
<a class="dropdown-item" href="javascript:;">Log out</a>
</div>
</div>
<a href="javascript:;">
<img class="img rounded" src="../../../assets/img/faces/team-5.jpg">
</a>
</div>
</div>
<div class="card-body pt-0">
<h4 class="display-4 mb-0">Dylan Wyatt</h4>
<p class="lead">Team Lead</p>
<div class="table-responsive">
<ul class="list-unstyled ">
<li class="py-1">
<div class="d-flex align-items-center">
<div>
<div class="badge badge-circle badge-info mr-3">
<i class="ni ni-atom"></i>
</div>
</div>
<div>
<h6 class="mb-1">Dedicated entrepreneur</h6>
</div>
</div>
</li>
<li class="py-1">
<div class="d-flex align-items-center">
<div>
<div class="badge badge-circle badge-success mr-3">
<i class="ni ni-user-run"></i>
</div>
</div>
<div>
<h6 class="mb-1">Urban exploration</h6>
</div>
</div>
</li>
<li class="py-1">
<div class="d-flex align-items-center">
<div>
<div class="badge badge-circle badge-danger mr-3">
<i class="ni ni-chart-bar-32"></i>
</div>
</div>
<div>
<h6 class="mb-1">Able to get good at everything</h6>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card card-profile" data-image="img-raised">
<div class="card-header-image">
<a href="javascript:;">
<img class="img" src="../../../assets/img/faces/alejandro-escamilla.jpg">
</a>
<div class="card-title text-white">
Austin Johnson
</div>
</div>
<div class="card-body">
<h6 class="card-category text-info text-center">Project Manager</h6>
<p class="card-description">
Don't be scared of the truth because we need to restart the human foundation in truth And I love you...
</p>
</div>
<div class="card-footer text-center">
<button type="button" class="btn-instagram btn-icon-only btn-simple btn btn-default">
<span class="btn-inner--icon"><i class="fab fa-instagram"></i></span>
</button>
<button type="button" class="btn-icon-only btn-simple btn btn-twitter">
<span class="btn-inner--icon"><i class="fab fa-twitter"></i></span>
</button>
<button type="button" class="btn-icon-only btn-simple btn btn-dribbble">
<span class="btn-inner--icon"><i class="fab fa-dribbble"></i></span>
</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-lg-3">
<div class="card card-blog card-background" data-animation="zooming">
<div class="full-background" style="background-image: url('../../../assets/img/theme/josh-appel.jpg"></div>
<a href="javascript:;">
<div class="card-body">
<div class="content-bottom">
<h6 class="card-category text-white opacity-8">New Challenges</h6>
<h5 class="card-title">Touch on a trend</h5>
</div>
</div>
</a>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="card card-blog card-background" data-animation="zooming">
<div class="full-background" style="background-image: url('../../../assets/img/theme/john-hoang.jpg"></div>
<a href="javascript:;">
<div class="card-body">
<div class="content-bottom">
<h6 class="card-category text-white opacity-8">New Opportunities</h6>
<h5 class="card-title">Constantly growing</h5>
</div>
</div>
</a>
</div>
</div>
<div class="col-md-6">
<div class="card card-blog card-background" data-animation="true">
<div class="full-background" style="background-image: url('../../../assets/img/theme/kit-suman.jpg"></div>
<div class="card-body">
<div class="content-bottom">
<h6 class="card-category text-white">Sales Leads</h6>
<a href="javascript:;">
<h5 class="card-title">Configure Blockchain Technology</h5>
</a>
</div>
</div>
</div>
</div>
</div>
Premium pack
10 Templates + Updates
+ Adobe Sketch
<div class="row">
<div class="col-md-4">
<div class="card card-pricing bg-success border-0 text-center mb-4" style="background-image: url('../../../assets/img/ill/pattern_pricing1.svg">
<div class="card-header bg-transparent">
<h6 class="text-uppercase ls-1 text-white py-3 mb-0">Bravo pack</h6>
</div>
<div class="card-body">
<div class="display-2 text-white">$49</div>
<span class=" text-white">per application</span>
<ul class="list-unstyled my-4">
<li>
<div class="d-flex align-items-center">
<div>
<div class="icon icon-xs icon-shape bg-white shadow rounded-circle text-success">
<i class="ni ni-book-bookmark"></i>
</div>
</div>
<div>
<span class="pl-2 text-sm text-white">Complete documentation</span>
</div>
</div>
</li>
<li>
<div class="d-flex align-items-center">
<div>
<div class="icon icon-xs icon-shape bg-white shadow rounded-circle text-success">
<i class="ni ni-diamond"></i>
</div>
</div>
<div>
<span class="pl-2 text-sm text-white">Working materials in Sketch</span>
</div>
</div>
</li>
<li>
<div class="d-flex align-items-center">
<div>
<div class="icon icon-xs icon-shape bg-white shadow rounded-circle text-success">
<i class="ni ni-chart-pie-35"></i>
</div>
</div>
<div>
<span class="pl-2 text-sm text-white">2GB cloud storage</span>
</div>
</div>
</li>
</ul>
<button type="button" class="btn btn-link text-white mb-3">Free Trial</button>
</div>
<div class="card-footer bg-transparent">
<a href="#!" class=" text-white">Request a demo</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card card-pricing bg-default card-background" style="background-image: url('../../../assets/img/ill/pricing_bg.svg" data-background="image">
<div class="card-body">
<h6 class="card-category text-white text-uppercase">Premium</h6>
<h1 class="card-title">
<small class="text-white">$</small>109
</h1>
<ul>
<li>
<b>100</b> Projects
</li>
<li>
<b>5</b> Team Members
</li>
<li>
<b>55</b> Personal Contacts
</li>
<li>
<b>5K</b> Messages
</li>
</ul>
<a href="javascript:;" class="btn btn-white btn-sm mt-3">
Get Started
</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card card-pricing bg-gradient-warning text-center" data-icon="big-icon">
<div class="card-header bg-transparent">
<div class="icon text-white">
<i class="ni ni-camera-compact"></i>
</div>
<p class="text-white">Premium pack</p>
</div>
<div class="card-body">
<div class="price d-inline">
<span class="currency text-white">$</span>
<span class="amount text-white">89</span>
<span class="frequency text-white">/mo</span>
</div>
<ul class="list-unstyled align-items-center">
<li>
<p class="text-sm text-white">10 Templates + Updates</p>
</li>
<li>
<p class="text-sm text-white">+ Adobe Sketch</p>
</li>
</ul>
</div>
<div class="card-footer bg-transparent">
<button type="button" class="btn btn-outline-white">Upgrade</button>
</div>
</div>
</div>
</div>
Design System
That’s my skill. I’m not really specifically talented at anything except for the ability to learn.
<div class="row">
<div class="col-lg-4 mr-auto text-left mt-4">
<div class="card bg-default shadow border-0">
<img src="../../../assets/img/theme/img-1-1200x1000.jpg" class="card-img-top">
<blockquote class="card-blockquote">
<svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 583 95" class="svg-bg">
<polygon points="0,52 583,95 0,95" class="fill-default"></polygon>
<polygon points="0,42 583,95 683,0 0,95" opacity=".2" class="fill-default"></polygon>
</svg>
<h4 class="display-4 text-white">Design System</h4>
<p class="lead text-italic text-white">That’s my skill. I’m not really specifically talented at anything except for the ability to learn. </p>
</blockquote>
</div>
</div>
</div>
The building block of a card is the .card-body
. Use it whenever you need a padded section within a card.
<div class="card">
<div class="card-body">
This is some text within a card body.
</div>
</div>
Card titles are used by adding .card-title
to a <h*>
tag. In the same way, links are added and placed next to each other by adding .card-link
to an <a>
tag.
Subtitles are used by adding a .card-subtitle
to a <h*>
tag. If the .card-title
and the .card-subtitle
items are placed in a .card-body
item, the card title and subtitle are aligned nicely.
Some quick example text to build on the card title and make up the bulk of the card's content.
Card link Another link<div class="card" style="width: 20rem;">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<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="javascript:;" class="card-link">Card link</a>
<a href="javascript:;" class="card-link">Another link</a>
</div>
</div>
.card-img-top
places an image to the top of the card. With .card-text
, text can be added to the card. Text within .card-text
can also be styled with the standard HTML tags.
Some quick example text to build on the card title and make up the bulk of the card's content.
<div class="card" style="width: 20rem;">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<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>
</div>
</div>
Create lists of content in a card with a flush list group.
<div class="card" style="width: 20rem;">
<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 class="card card-nav-tabs" style="width: 20rem;">
<div class="card-header card-header-danger">
Featured
</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>
Add an optional header and/or footer within a card.
With supporting text below as a natural lead-in to additional content.
Go somewhere<div class="card card-nav-tabs">
<div class="card-header card-header-warning">
Featured
</div>
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="javascript:;" class="btn btn-primary">Go somewhere</a>
</div>
</div>
Card headers can be styled by adding .card-header
to <h*>
elements.
With supporting text below as a natural lead-in to additional content.
Go somewhere<div class="card card-nav-tabs">
<h4 class="card-header card-header-info">Featured</h4>
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="javascript:;" class="btn btn-primary">Go somewhere</a>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<div class="card card-nav-tabs">
<div class="card-header card-header-success">
Quote
</div>
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</div>
</div>
With supporting text below as a natural lead-in to additional content.
Go somewhere<div class="card card-nav-tabs text-center">
<div class="card-header card-header-primary">
Featured
</div>
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="javascript:;" class="btn btn-primary">Go somewhere</a>
</div>
<div class="card-footer text-muted">
2 days ago
</div>
</div>
You can quickly change the text alignment of any card—in its entirety or specific parts—with text align classes.
With supporting text below as a natural lead-in to additional content.
Go somewhereWith supporting text below as a natural lead-in to additional content.
Go somewhereWith supporting text below as a natural lead-in to additional content.
Go somewhere<div class="card" style="width: 20rem;">
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="javascript:;" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<div class="card text-center" style="width: 20rem;">
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="javascript:;" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<div class="card text-right" style="width: 20rem;">
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="javascript:;" class="btn btn-primary">Go somewhere</a>
</div>
</div>
Add some navigation to a card’s header (or block) with Bootstrap’s nav components.
With supporting text below as a natural lead-in to additional content.
Go somewhere<div class="card text-center">
<div class="card-header card-header-rose">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="javascript:;">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:;">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="javascript:;">Disabled</a>
</li>
</ul>
</div>
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="javascript:;" class="btn btn-primary">Go somewhere</a>
</div>
</div>
With supporting text below as a natural lead-in to additional content.
Go somewhere<div class="card text-center">
<div class="card-header">
<ul class="nav nav-pills card-header-pills">
<li class="nav-item">
<a class="nav-link active" href="javascript:;">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:;">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="javascript:;">Disabled</a>
</li>
</ul>
</div>
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="javascript:;" class="btn btn-primary">Go somewhere</a>
</div>
</div>
Cards include a few options for working with images. Choose from appending “image caps” at either end of a card, overlaying images with card content, or simply embedding the image in a card.
Similar to headers and footers, cards can include top and bottom “image caps”—images at the top or bottom of a card.
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
<div class="card mb-3">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<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"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<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"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
<img class="card-img-bottom" src="..." alt="Card image cap">
</div>
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 bg-dark text-white">
<img class="card-img" src="..." alt="Card image">
<div class="card-img-overlay">
<h4 class="card-title">Card title</h4>
<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>