Cards
Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.
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. If you’re familiar with Bootstrap 3, cards replace our old panels, wells, and thumbnails. Similar functionality to those components is available as modifier classes for cards.
Example
Using .row-eq-height on our row, we can have all our cards be equal height. Also by adding .card-link-floater to our cards, we can have our card link float to the bottom of the card for a visually pleasing display. By turning the card div into a link tag, we can make the full card clickable for an easier user experience.
Typical Card
Card subtitle
Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title and make up the bulk of the card's content.
Another link<div class="row row-eq-height">
<div class="col-md-6">
<div class="card card-link-floater card-shadow">
<div class="card-img-mask card-img-mask-top">
<img src="https://source.unsplash.com/random/720x405" alt="A Random image generated from Unsplash">
</div>
<div class="card-body">
<h3 class="card-title">Typical Card</h3>
<h4 class="card-subtitle">Card subtitle</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. Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="card-link">Another link</a>
</div>
</div>
</div>
<div class="col-md-6">
<a class="card card-shadow card-link-floater" href="">
<div class="card-img-mask card-img-mask-top">
<img src="https://source.unsplash.com/random/720x405" alt="A Random image generated from Unsplash">
</div>
<div class="card-body">
<h3 class="card-title">FULL LINK CARD</h3>
<h4 class="card-subtitle">Card subtitle</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. Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<span class="card-link">Card link</span>
</div>
</a>
</div>Card Background Image
Cards can feature full background images with links that float to the bottom.
Best of Both Worlds
Card Subtitle
Some quick example text to build on the card title and make up the bulk of the card's content.
Card link<div class="row row-eq-height">
<div class="col-md-6">
<a class="card card-shadow card-link-floater card-background card-lg" href="">
<img class="card-img-bg" src="https://source.unsplash.com/random/720x405" alt="A Random image from Unsplash">
<div class="card-body">
<h3 class="card-title">Card with Background</h3>
<span class="card-link">Explore Now</span>
</div>
</a>
</div>
<div class="col-md-6">
<div class="card card-lg card-link-floater card-shadow">
<a href="" class="card-img-mask card-img-mask-top"><img src="https://source.unsplash.com/random/720x405" alt="A Random image from Unsplash"></a>
<div class="card-body">
<h3 class="card-title card-title-rev"><a href="">Best of Both Worlds</a></h3>
<h4 class="card-subtitle">Card Subtitle</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="#" class="card-link">Card link</a>
</div>
</div>
</div>
</div>
Left and Right Aligned Images
Cards can have left aligned images or right aligned images by changing the order of the divs (.order-lg-2). These cards reorient to have the image on the top when in viewed in mobile applications.
<div class="row row-eq-height">
<div class="col-12">
<div class="card card-lg card-shadow">
<div class="row row-eq-height row-no-padding">
<div class="col-lg-6">
<div class="card-img-mask card-img-mask-full">
<img src="https://source.unsplash.com/random/720x405" alt="Duotone image of McMaster University Campus">
</div>
</div>
<div class="col-lg-6">
<div class="card-body card-link-floater">
<h3 class="card-title">Card with Left Aligned Image</h3>
<p class="card-text">...</p>
<a href="#" class="card-link">Explore our city</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="card card-lg card-shadow">
<div class="row row-eq-height row-no-padding">
<div class="col-lg-6 order-md-2">
<div class="card-img-mask card-img-mask-full">
<img src="https://source.unsplash.com/random/720x405" alt="Duotone image of McMaster University Campus">
</div>
</div>
<div class="col-lg-6">
<div class="card-body card-link-floater">
<h3 class="card-title">Card with Right Aligned Image</h3>
<p class="card-text">...</p>
<a href="#" class="card-link">Explore our city</a>
</div>
</div>
</div>
</div>
</div>
</div>Padded Cards
Get a great visual hover effect with Padded Cards.
<div class="row row-eq-height">
<div class="col-lg-12">
<div class="card card-lg card-padded">
<div class="row row-eq-height row-no-padding">
<div class="col-md-6">
<div class="card-img-mask card-img-mask-top">
<img src="https://source.unsplash.com/random/720x405" alt="Duotone image of McMaster University Campus">
</div>
</div>
<div class="col-md-6">
<div class="card-body card-link-floater">
<h3 class="card-title">CARD PADDED</h3>
<p class="card-text">...</p>
<a href="#" class="card-link">Explore our city</a>
</div>
</div>
</div>
</div>
</div>
</div>Circle Images and Icons
Use circle cards for profile images or icons
Image Circle
Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title and make up the bulk of the card's content.
Icon Circle
Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title and make up the bulk of the card's content.
<div class="row row-eq-height">
<div class="col-md-6">
<div class="card card-shadow">
<div class="card-body text-center pb-0">
<div class="icon-circle mb-0">
<img src="https://brand.mcmaster.ca/app/uploads/2019/04/icon-person_svg.svg" alt="Icon of a Person">
</div>
</div>
<div class="card-body text-center">
<h3 class="card-title">Image Circle</h3>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card card-shadow">
<div class="card-body text-center pb-0">
<div class="icon-circle mb-0">
<img src="https://brand.mcmaster.ca/app/uploads/2019/04/icon-lightbulb_svg.svg" alt="Icon of Lightbulb">
</div>
</div>
<div class="card-body text-center">
<h3 class="card-title">Icon Circle</h3>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
</div>Icon Circle Using Font Icons
If you use a font icon library such as font awesome, you can include these icons in your card circles. You will need to place the font awesome script in the head of your document
Icon Font Circle
Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title and make up the bulk of the card's content.
<!-- Font Awesome -->
<script defer src="https://use.fontawesome.com/releases/v5.0.10/js/all.js" integrity="sha384-slN8GvtUJGnv6ca26v8EzVaR9DC58QEwsIk9q1QXdCU8Yu8ck/tL/5szYlBbqmS+" crossorigin="anonymous"></script>
<div class="col-md-6">
<div class="card card-shadow">
<div class="card-body text-center pb-0">
<div class="icon-circle mb-0">
<i class="far fa-edit fa-4x mt-4"></i>
</div>
</div>
<div class="card-body text-center">
<h3 class="card-title">Icon Font Circle</h3>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>