Cards
Cards provide a flexible and extensible content container.
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 components.
Card title
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 shadow" style="width: 18rem;">
<img class="card-img-top" src="/solid/img/demo-article-2.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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="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.
<div class="card shadow">
<div class="card-body">
This is some text within a card body.
</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 .card-subtitle to a <h*> tag. Normal paragraphs may be styled using .card-text.
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 link
<div class="card shadow" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
Images
Use an <img> element with the .card-img-top class to place an image at the top of the card. Alternatively, place an image at the bottom using .card-img-bottom.
Card with top img
Some quick example text to build on the card title and make up the bulk of the card's content.
Card with bottom img
Some quick example text to build on the card title and make up the bulk of the card's content.
<div class="row">
<div class="col-6">
<div class="card shadow">
<img class="card-img-top" src="/solid/img/demo-article-2.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card with top img</h5>
<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>
</div>
<div class="col-6">
<div class="card shadow">
<div class="card-body">
<h5 class="card-title">Card with bottom img</h5>
<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>
<img class="card-img-bottom" src="/solid/img/demo-article-2.jpg" alt="Card image cap">
</div>
</div>
</div>
Image overlay
Give your card a unique style by overlaying the card content on a background image. Use additional styles or utilities to improve content visibility. Wrap the card’s content in .card-img-overlay.
<div class="card bg-dark text-white shadow" style="max-width: 27rem;">
<div class="img-overlay overlay-medium bg-black">
<img class="card-img img-fluid" src="/solid/img/demo-article-2.jpg" alt="">
</div>
<div class="card-img-overlay">
<h5 class="card-title">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>
List groups
Create lists of content in a card using list groups.
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
<div class="card shadow" style="width: 18rem;">
<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>
Header and footer
Add an optional header and/or footer within a card using .card-header and .card-footer. Wrap body content in .card-body.
Special title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhere
<div class="card shadow text-center">
<div class="card-header">
Featured
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
<div class="card-footer text-muted">
2 days ago
</div>
</div>
Navigation
Add navigation components such as tabs or pills using .card-header-tabs and .card-header-pills.
Special title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhere
<div class="card shadow text-center">
<div class="card-header border-bottom border-primary">
<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">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
Special title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhere
<div class="card shadow text-center">
<div class="card-header">
<ul class="nav nav-pills card-header-pills">
<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">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
Customizing cards
Flippable cards
Flip cards around to reveal additional content using .card-rotate and .front and .back child elements that wrap the card’s content. The card height is determined by the content of the front card. It is recommended to manually set a height so that you won’t get any issues with back side content rendering outside of the card element.
Trigger the rotation with a button that has a data-card attribute that links to the card’s ID. Our JavaScript activates the functionality on page load.
Rotate
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at felis in enim ultrices ultrices.
Backside
A rotating card, isn't that fancy?
<div class="row">
<div class="col-md-6">
<div class="card card-rotate" id="flipcard1">
<div class="front bg-primary text-white shadow">
<div class="card-body">
<h4 class="card-title">Rotate</h4>
<hr>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at felis in enim ultrices ultrices. </p>
<button class="btn btn-primary btn-cardrotate" data-card="flipcard1"><i class="fas fa-redo"></i> Flip</button>
</div>
</div>
<div class="back bg-dark text-white shadow">
<div class="card-body">
<h4 class="card-title">Backside</h4>
<hr>
<p class="card-text">A rotating card, isn't that fancy? </p>
<button class="btn btn-primary btn-cardrotate" data-card="flipcard1"><i class="fas fa-undo"></i> Flip</button>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card card-rotate text-white" id="flipcard2">
<div class="front shadow">
<div class="img-overlay overlay-medium bg-black">
<img class="card-img img-fluid" src="/solid/img/demo-article-2.jpg" alt="">
</div>
<div class="card-img-overlay">
<h4 class="card-title">Rotate</h4>
<hr>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<button class="btn btn-primary btn-cardrotate" data-card="flipcard2"><i class="fas fa-redo"></i> Flip</button>
</div>
</div>
<div class="back shadow">
<div class="img-overlay overlay-medium bg-primary">
<img class="card-img img-fluid" src="/solid/img/demo-article-3.jpg" alt="">
</div>
<div class="card-img-overlay">
<h4 class="card-title">Backside</h4>
<hr>
<p class="card-text">A rotating card, isn't that fancy? </p>
<button class="btn btn-primary btn-cardrotate" data-card="flipcard2"><i class="fas fa-undo"></i> Flip</button>
</div>
</div>
</div>
</div>
</div>
Card layouts
In addition to styling the content within cards, a few options are included for laying out series of cards. For the time being, these layout options are not yet responsive.
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.
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.
<div class="card-group shadow">
<div class="card">
<img class="card-img-top" src="/solid/img/demo-article-1.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">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>
</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="/solid/img/demo-article-2.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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="/solid/img/demo-article-3.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">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 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.
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.
<div class="card-deck">
<div class="card shadow">
<img class="card-img-top" src="/solid/img/demo-article-1.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">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>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card shadow">
<img class="card-img-top" src="/solid/img/demo-article-2.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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 shadow">
<img class="card-img-top" src="/solid/img/demo-article-3.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">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 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 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.
Heads up! Your mileage with card columns may vary. To prevent cards breaking across columns, we must set them to display: inline-block; as column-break-inside: avoid; isn’t a bulletproof solution yet.
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 a regular title and short paragraphy of text below it.
Last updated 3 mins ago
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Card title
This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.
Last updated 3 mins ago
<div class="card-columns">
<div class="card shadow">
<img class="card-img-top" src="/solid/img/demo-article-1.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title that wraps to a new line</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
<div class="card shadow p-3">
<blockquote class="blockquote mb-0 card-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card shadow">
<img class="card-img-top" src="/solid/img/demo-article-2.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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>
<div class="card bg-primary text-white text-center p-3 shadow">
<blockquote class="blockquote mb-0">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
<footer class="blockquote-footer text-white">
<small>
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card shadow text-center">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has a regular title and short paragraphy of text below it.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card shadow ">
<img class="card-img" src="/solid/img/demo-article-3.jpg" alt="Card image">
</div>
<div class="card shadow p-3 text-right">
<blockquote class="blockquote mb-0">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card shadow">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>