To create a basic card, apply the .card
and .card-body
classes to an element to create the outer card container.
<div class="card">
<div class="card-body">Basic card</div>
</div>
Add an optional header and/or footer within a card. Add .card-title
to any heading elements and .card-text
to text elements.
<div class="card">
<div class="card-header">
Free Time Learning
</div>
<div class="card-body">
<h4 class="card-title">F T L (www.freetimelearning.com)</h4>
<p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<a href="#" class="btn btn-primary">Click Here!</a>
</div>
</div>
Card headers can be styled by adding .card-header
to <h*>
elements.
<div class="card">
<h4 class="card-header">Free Time Learning</h4>
<div class="card-body">
<h4 class="card-title">F T L (www.freetimelearning.com)</h4>
<p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<a href="#" class="btn btn-primary">Click Here!</a>
</div>
</div>
Header and Footer
<div class="card text-center">
<div class="card-header"> Free Time Learning </div>
<div class="card-body">
<h4 class="card-title">F T L (www.freetimelearning.com)</h4>
<p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<a href="#" class="btn btn-primary">Click Here!</a>
</div>
<div class="card-footer text-muted">
Designed by <a href="http://www.freetimelearning.com" target="_blank">F T L</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.
<div class="card" style="width: 20rem;">
<img class="card-img-top" src="../images/content/images-3.jpg" alt="Free Time Learning">
<div class="card-body">
<p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<a href="http://www.freetimelearning.com/bootstrap-tutorial.php" target="_blank" class="card-link">
Bootstrap 3
</a>
<a href="http://www.freetimelearning.com/bootstrap-4-tutorial.php" target="_blank" class="card-link">
Bootstrap 4
</a>
</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">HTML5</li>
<li class="list-group-item">CSS3</li>
<li class="list-group-item">Bootstrap 3</li>
</ul>
</div>
<div class="card" style="width: 20rem;">
<div class="card-header"> Free Time Learning </div>
<ul class="list-group list-group-flush">
<li class="list-group-item">HTML5</li>
<li class="list-group-item">CSS3</li>
<li class="list-group-item">Bootstrap 3</li>
<li class="list-group-item">Bootstrap 4</li>
</ul>
</div>
The bootstrap 4 card background colors, use contextual classes (.bg-primary
, .bg-success
, .bg-info
, .bg-warning
, .bg-danger
, .bg-secondary
, .bg-dark
and .bg-light
.
<div class="row">
<div class="col-6 col-md-6 col-lg-4 col-xlg-4">
<div class="card text-dark mb-3" style="max-width: 25rem;">
<div class="card-header">Basic card</div>
<div class="card-body">
<h4>Free Time Learning</h4>
<p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
</div>
<div class="col-6 col-md-6 col-lg-4 col-xlg-4">
<div class="card text-white bg-primary mb-3" style="max-width: 25rem;">
<div class="card-header">Primary card</div>
<div class="card-body">
<h4>Free Time Learning</h4>
<p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
</div>
<div class="col-6 col-md-6 col-lg-4 col-xlg-4">
<div class="card text-white bg-success mb-3" style="max-width: 25rem;">
<div class="card-header">Success card</div>
<div class="card-body">
<h4>Free Time Learning</h4>
<p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
</div>
<div class="col-6 col-md-6 col-lg-4 col-xlg-4">
<div class="card text-white bg-info mb-3" style="max-width: 25rem;">
<div class="card-header">Info card</div>
<div class="card-body">
<h4>Free Time Learning</h4>
<p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
</div>
<div class="col-6 col-md-6 col-lg-4 col-xlg-4">
<div class="card text-white bg-warning mb-3" style="max-width: 25rem;">
<div class="card-header">Warning card</div>
<div class="card-body">
<h4>Free Time Learning</h4>
<p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
</div>
<div class="col-6 col-md-6 col-lg-4 col-xlg-4">
<div class="card text-white bg-danger mb-3" style="max-width: 25rem;">
<div class="card-header">Danger card</div>
<div class="card-body">
<h4>Free Time Learning</h4>
<p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
</div>
<div class="col-6 col-md-6 col-lg-4 col-xlg-4">
<div class="card text-white bg-secondary mb-3" style="max-width: 25rem;">
<div class="card-header">Secondary card</div>
<div class="card-body">
<h4>Free Time Learning</h4>
<p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
</div>
<div class="col-6 col-md-6 col-lg-4 col-xlg-4">
<div class="card text-white bg-dark mb-3" style="max-width: 25rem;">
<div class="card-header">Dark card</div>
<div class="card-body">
<h4>Free Time Learning</h4>
<p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
</div>
<div class="col-6 col-md-6 col-lg-4 col-xlg-4">
<div class="card text-dark bg-light mb-3" style="max-width: 25rem;">
<div class="card-header">Light card</div>
<div class="card-body">
<h4>Free Time Learning</h4>
<p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
</div>
</div>
Use border utilities to change just the border-color of a card. Note that you can put .text-{color} classes on the parent .card or a subset of the card’s contents as shown below.
<div class="row">
<div class="col-6 col-md-6 col-lg-4 col-xlg-4">
<div class="card border mb-3" style="max-width: 25rem;">
<div class="card-header">Basic card</div>
<div class="card-body">
<h4>Free Time Learning</h4>
<p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
</div>
<div class="col-6 col-md-6 col-lg-4 col-xlg-4">
<div class="card text-primary border-primary mb-3" style="max-width: 25rem;">
<div class="card-header">Primary card</div>
<div class="card-body">
<h4>Free Time Learning</h4>
<p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
</div>
<div class="col-6 col-md-6 col-lg-4 col-xlg-4">
<div class="card text-success border-success mb-3" style="max-width: 25rem;">
<div class="card-header">Success card</div>
<div class="card-body">
<h4>Free Time Learning</h4>
<p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
</div>
<div class="col-6 col-md-6 col-lg-4 col-xlg-4">
<div class="card text-info border-info mb-3" style="max-width: 25rem;">
<div class="card-header">Info card</div>
<div class="card-body">
<h4>Free Time Learning</h4>
<p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
</div>
<div class="col-6 col-md-6 col-lg-4 col-xlg-4">
<div class="card text-warning border-warning mb-3" style="max-width: 25rem;">
<div class="card-header">Warning card</div>
<div class="card-body">
<h4>Free Time Learning</h4>
<p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
</div>
<div class="col-6 col-md-6 col-lg-4 col-xlg-4">
<div class="card text-danger border-danger mb-3" style="max-width: 25rem;">
<div class="card-header">Danger card</div>
<div class="card-body">
<h4>Free Time Learning</h4>
<p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
</div>
<div class="col-6 col-md-6 col-lg-4 col-xlg-4">
<div class="card text-secondary border-secondary mb-3" style="max-width: 25rem;">
<div class="card-header">Secondary card</div>
<div class="card-body">
<h4>Free Time Learning</h4>
<p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
</div>
<div class="col-6 col-md-6 col-lg-4 col-xlg-4">
<div class="card text-dark border-dark mb-3" style="max-width: 25rem;">
<div class="card-header">Dark card</div>
<div class="card-body">
<h4>Free Time Learning</h4>
<p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
</div>
<div class="col-6 col-md-6 col-lg-4 col-xlg-4">
<div class="card text-dark border-light mb-3" style="max-width: 25rem;">
<div class="card-header">Light card</div>
<div class="card-body">
<h4>Free Time Learning</h4>
<p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
</div>
</div>
Bootstrap 4 image caps are “image caps
”—images at the top or bottom of a card.
<div class="card mb-3">
<img class="card-img-top" src="../images/content/images-4.jpg" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Free Time Learning</h4>
<p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="card-text"><small class="text-muted">Last updated : 21/12/2017</small></p>
</div>
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title">Free Time Learning</h4>
<p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="card-text"><small class="text-muted">Last updated : 21/12/2017</small></p>
</div>
<img class="card-img-bottom" src="../images/content/images-3.jpg" alt="Card image cap">
</div>
Turn an image into a card background and use .card-img-overlay
to add text on top of the image
<div class="card img-fluid">
<img class="card-img-top" src="../images/content/images-4.jpg" alt="Card image" style="width:100%">
<div class="card-img-overlay">
<h4 class="card-title text-white">Free Time Learning</h4>
<p class="card-text text-white">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<a href="#" class="btn btn-primary">Click Here!</a>
</div>
</div>
Add some navigation to a card’s header (or block) with Bootstrap’s nav components.
<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">HTML5</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CSS3</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Bootstrap</a>
</li>
</ul>
</div>
<div class="card-body">
<h4 class="card-title">HTML</h4>
<p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<a href="#" class="btn btn-primary">Click Here!</a>
</div>
</div>
Bootstrap 4 card groups to render cards as a single, attached element with equal width and height columns. Card groups use display: flex;
to achieve their uniform sizing.
<div class="card-group">
<div class="card">
<img class="card-img-top" src="../images/content/images-3.jpg" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Free Time Learning</h4>
<p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="card-text"><small class="text-muted">Last updated 21/12/2017</small></p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="../images/content/images-3.jpg" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Free Time Learning</h4>
<p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="card-text"><small class="text-muted">Last updated 21/12/2017</small></p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="../images/content/images-3.jpg" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Free Time Learning</h4>
<p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="card-text"><small class="text-muted">Last updated 21/12/2017</small></p>
</div>
</div>
</div>
Need a set of equal width and height cards that aren’t attached to one another? Use card decks.
<div class="card-deck">
<div class="card">
<img class="card-img-top" src="../images/content/images-3.jpg" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Title</h4>
<p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 21/12/2017</small>
</div>
</div>
<div class="card">
<img class="card-img-top" src="../images/content/images-3.jpg" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Title</h4>
<p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 21/12/2017</small>
</div>
</div>
<div class="card">
<img class="card-img-top" src="../images/content/images-3.jpg" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Title</h4>
<p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 21/12/2017</small>
</div>
</div>
</div>