Cards
Boomerang's cards provide a flexible and extensible content container with multiple variants and options.
Examples
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.
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.
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhere
Inverse card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereExample
<!-- Default card -->
<div class="card">
<img class="card-img-top" src="path_to_image" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text....</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<!-- Inverse card -->
<div class="card card-inverse">
<img class="card-img-top" src="path_to_image" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text....</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
Content types
Cards support a wide variety of content, including images, text, list groups, links, and more. Below are examples of what’s supported.
Body
The building block of a card is the .card-body. Use it whenever you need a padded section within a card.
This is some text within a card body.
Example
<div class="card">
<div class="card-body">
<p class="mb-0">This is some text within a card body.<p>
</div>
</div>
Titles, text, and links
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.
Card title
Card subtitle
Some quick example text to build on the card title and make up the bulk of the card's content.
Card link Another linkExample
<div class="card">
<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...</p>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
Images
.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.
Example
<div class="card">
<img class="card-img-top" src="path_to_image" alt="Card image cap">
<div class="card-body">
<p class="card-text">Some quick example text...</p>
</div>
</div>
Metadata
A card can contain content 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
Example
Actions
A card can contain a like, star or comment action. But you are not limited to these. Any icon can be transformed into an action. Use the .active class to
toggle the active state of an action button.
Favorite post
With supporting text below as a natural lead-in to additional content.
Love post
With supporting text below as a natural lead-in to additional content.
Example
Comment box and actions
Also, you cand make use of the extended functionalities of a card like commenting, voting or liking posts.
23 likes
With supporting text below as a natural lead-in to additional content.
23 likes
With supporting text below as a natural lead-in to additional content.
Example
List groups
Create lists of content in a card with a flush list group.
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
Example
<div class="card">
<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>
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
Example
<div class="card">
<div class="card-header">
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.
Featured
Special title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhereExample
<div class="card">
<div class="card-header">
<h3 class="heading heading-5">Featured</h3>
</div>
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below...</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
Quote
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Example
<div class="card">
<div class="card-header">
<h3 class="heading heading-5">Quote</h3>
</div>
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<footer class="blockquote-footer">
Someone famous in <cite title="Source Title">Source Title</cite>
</footer>
</blockquote>
</div>
</div>
Featured
Special title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhereExample
<div class="card text-center">
<div class="card-header">
<h3 class="heading heading-5">Featured</h3>
</div>
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below...</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
<div class="card-footer text-muted">
2 days ago
</div>
</div>
Add some navigation to a card’s header (or block) with Bootstrap’s nav components.
Special title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhereExample
<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="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">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...</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
Images
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.
Card title
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
Card title
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
Example
<!-- Image on top -->
<div class="card">
<img class="card-img-top" src="path_to_image" 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...</p>
<p class="card-text">
<small class="text-muted">Last updated 3 mins ago</small>
</p>
</div>
</div>
<!-- Image on bottom -->
<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...</p>
<p class="card-text">
<small class="text-muted">Last updated 3 mins ago</small>
</p>
</div>
<img class="card-img-bottom" src="path_to_image" alt="Card image cap">
</div>
Image overlays
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.
You can vertically align the content using the modifier classes: .align-items-start, .align-items-center or .align-items-bottom.
Also, you can horizontaly align the content using: .text-left, .text-center or .text-right.
Example
<div class="card bg-dark text-white">
<img class="card-img" src="path_to_image" alt="Card image">
<span class="mask mask-dark--style-2"></span>
<div class="card-img-overlay d-flex align-items-center">
<div class="col">
<h4 class="heading heading-inverse heading-3 strong-600">Card title</h4>
<p class="card-text c-gray-lighter">This is a wider card with supporting text below...</p>
<p class="card-text c-gray-lighter">Last updated 3 mins ago</p>
</div>
</div>
</div>
Captions
You can choose from one of the custom styled card captions overlayed on any card image. You can horizontally align the content with the .text-left, .text-center or .text-right classes.
Style 1
Example
<div class="card">
<div class="card-image">
<a href="#">
<img src="path_to_image">
</a>
</div>
<div class="card-caption-overlay card-caption-overlay--1 card-caption-overlay--dark-gradient">
<div class="block-info-inner">
<div class="text-center">
<a href="#" class="heading heading-4 strong-500 mb-0 c-white">Card title</a>
<span class="clearfix"></span>
<small class="text-uppercase c-white">This is an overlay caption</small>
</div>
</div>
</div>
</div>
Style 2
Example
<!-- Light caption -->
<div class="card">
<div class="card-image">
<a href="#">
<img src="path_to_image">
</a>
</div>
<div class="card-caption-overlay card-caption-overlay--2">
<div class="card-caption">
<div class="text-center">
<a href="#" class="heading heading-6 strong-500 mb-0">
Card title
</a>
<span class="clearfix"></span>
<span class="text-sm">This is an overlay caption</span>
</div>
</div>
</div>
</div>
<!-- Dark caption -->
<div class="card">
<div class="card-image">
<a href="#">
<img src="path_to_image">
</a>
</div>
<div class="card-caption-overlay card-caption-overlay--2 card-caption-overlay--dark">
<div class="card-caption">
<div class="text-center">
<a href="#" class="heading heading-6 strong-500 mb-0">
Card title
</a>
<span class="clearfix"></span>
<span class="text-sm">This is an overlay caption</span>
</div>
</div>
</div>
</div>
.card-caption-overlay--animated modifier class on the main caption container.
Style 3
Example
<!-- Light caption -->
<div class="card">
<div class="card-image">
<a href="#">
<img src="path_to_image">
</a>
</div>
<div class="card-caption-overlay card-caption-overlay--3">
<div class="card-caption">
<div class="text-center">
<a href="#" class="heading heading-6 strong-500 mb-0">
Card title
</a>
<span class="clearfix"></span>
<span class="text-sm">This is an overlay caption</span>
</div>
</div>
</div>
</div>
<!-- Dark caption -->
<div class="card">
<div class="card-image">
<a href="#">
<img src="path_to_image">
</a>
</div>
<div class="card-caption-overlay card-caption-overlay--3 card-caption-overlay--dark">
<div class="card-caption">
<div class="text-center">
<a href="#" class="heading heading-6 strong-500 mb-0">
Card title
</a>
<span class="clearfix"></span>
<span class="text-sm">This is an overlay caption</span>
</div>
</div>
</div>
</div>
.card-caption-overlay--animated modifier class on the main caption container.
Styles
Cards include various options for customizing their backgrounds, borders, and color.
Background and color
Use text and background utilities to change the appearance of a card.
Primary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Primary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Primary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Primary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Primary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Primary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Primary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Primary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Other colors
Use text and background utilities to change the appearance of a card.
Primary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Primary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Primary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Primary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Primary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Primary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Primary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Primary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Example
<div class="card text-white bg-blue">
<div class="card-header">Header</div>
<div class="card-body">
<h4 class="card-title">Primary card title</h4>
<p class="card-text">Some quick example text...</p>
</div>
</div>
Border
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.
Primary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Primary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Primary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Primary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Primary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Primary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Primary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Primary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Example
<div class="card border-primary">
<div class="card-header">Header</div>
<div class="card-body">
<h4 class="card-title">Primary card title</h4>
<p class="card-text">Some quick example text...</p>
</div>
</div>
Shadows
Use shadow utilities to change the depth of a card. You can use it by default or apply it only when the mouse hovers the card.
The modifier classes responsable for the card's depth styling are .z-depth-* with values from 1 to 5.
Primary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Primary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Primary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Primary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Primary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
.z-depth-*--hover with values from 1 to 5.
Primary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Primary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Primary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Primary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Primary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Example
<!-- Visible shadow all times -->
<div class="col-md-6">
<div class="card--hover">
<div class="card-header">Header</div>
<div class="card-body">
<h4 class="card-title">Primary card title</h4>
<p class="card-text">Some quick example text to build...</p>
</div>
</div>
</div>
<!-- Visible shadow only on mouse hover -->
<div class="col-md-6">
<div class="card--hover">
<div class="card-header">Header</div>
<div class="card-body">
<h4 class="card-title">Primary card title</h4>
<p class="card-text">Some quick example text...</p>
</div>
</div>
</div>
Card layout
In addition to styling the content within cards, Bootstrap includes a few options for laying out series of cards.
Card groups
Use 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.
Card title
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
Card title
This card has supporting text below as a natural lead-in to additional content.
Last updated 3 mins ago
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
Last updated 3 mins ago
Example
<div class="card-group">
<div class="card">
<img class="card-img-top" src="path_to_image" 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...</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="path_to_image" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">This card has supporting text below...</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="path_to_image" 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...</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
When using card groups with footers, their content will automatically line up.
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Card title
This card has supporting text below as a natural lead-in to additional content.
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
Example
<div class="card-group">
<div class="card">
<img class="card-img-top" src="path_to_image" 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>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img class="card-img-top" src="path_to_image" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img class="card-img-top" src="path_to_image" 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 card has even longer content than the first to show that equal height action.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
Card decks
Need a set of equal width and height cards that aren’t attached to one another? Use card decks.
Card title
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
Card title
This card has supporting text below as a natural lead-in to additional content.
Last updated 3 mins ago
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
Last updated 3 mins ago
Example
<div class="card-deck">
<div class="card">
<img class="card-img-top" src="path_to_image" 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 class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img class="card-img-top" src="path_to_image" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img class="card-img-top" src="path_to_image" 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 card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
Card columns
Cards can be organized into Masonry-like columns with just CSS by wrapping them in .card-columns. Cards are built with CSS column properties instead of flexbox for easier alignment. Cards are ordered from top to bottom and left to right.
Card title that wraps to a new line
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Card title
This card has supporting text below as a natural lead-in to additional content.
Last updated 3 mins ago
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.
Card title
This card has supporting text below as a natural lead-in to additional content.
Last updated 3 mins ago
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
Last updated 3 mins ago
Example
<div class="card-deck">
<div class="card">
<img class="card-img-top" src="path_to_image" 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 class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img class="card-img-top" src="path_to_image" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img class="card-img-top" src="path_to_image" 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 card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>