A card is a UI design pattern that groups related information in a flexible-size container visually resembling a playing card. 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.
Cards are used for grouping information.
Cards present a summary and link to additional details.
Cards resemble physical cards.
Cards allow for flexible layouts.
The card pattern is based on the idea of grouping content into discrete, completely visible units with controlled information layout and appearance. However, the pattern is not focused on a full-screen item (as in the older card model), but takes up just a small region of the screen. Contemporary cards are often used in a layout with multiple cards per screen.
Below is an example of a basic card with mixed content and a fixed width. Cards by default have no fixed width, so they will fill the full width of its parent element. This is easily customized with Bootstrap's 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.
<div class="card mx-auto" style="width: 20rem;">
<img class="card-img-top" src="assets/images/sample-image-3.jpg" 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="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
Titles, text, and links
Card titles are used by adding .card-title to a header tag. In the same way, links are added and placed next to each other by adding .card-link to an a href tag. Subtitles are used by adding a .card-subtitle to a head 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. (more info)
Card title
Card subtitle
Some quick example text to build on the card title and make up the bulk of the card's content.
<div class="card mx-auto mt-3" style="width: 20rem;">
<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>
Cards with multiple content types
Mix and match multiple content types to create the card you need, or throw everything in there. Shown below are image styles, blocks, text styles, and a list group—all wrapped in a fixed-width card. (more info)
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
<div class="card mx-auto mt-3" style="width: 20rem;">
<img class="card-img-top" src="assets/images/sample-image-3.jpg" 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>
</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 class="card-body">
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
Header and footer
Add an optional header and/or footer within a card. (more info)
Card Header Content
Special title treatment
With supporting text below as a natural lead-in to additional content.
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 mb-3 mx-auto mt-3">
<div class="card-group">
<div class="card">
<img class="card-img-top" src="assets/images/sample-image-1.jpg" 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="assets/images/sample-image-2.jpg" 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="assets/images/sample-image-3.jpg" 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>
</xmp>
<hr />
</div>
</div>
<!-- end code example -->
<h5>Card decks</h5>
<p>Need a set of equal width and height cards that aren’t attached to one another? Use card decks.</p>
<div class="card-deck pb-2">
<div class="card">
<img class="card-img-top" src="assets/images/sample-image-1.jpg" 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 class="card">
<img class="card-img-top" src="assets/images/sample-image-2.jpg" 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 class="card">
<img class="card-img-top" src="assets/images/sample-image-3.jpg" 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>
<!-- code example -->
<p class="pt-2">
<button data-toggle="collapse" href="#card-decks-code" class="btn btn-sm btn-outline-tertiary"><i class=" fa fa-code"></i> Show/Hide Code</button>
</p>
<hr />
<div class="collapse" id="card-decks-code">
<div class=" py-0">
<xmp>
<div class="card-deck pb-2">
<div class="card">
<img class="card-img-top" src="assets/images/sample-image-1.jpg" 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 class="card">
<img class="card-img-top" src="assets/images/sample-image-2.jpg" 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 class="card">
<img class="card-img-top" src="assets/images/sample-image-3.jpg" 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>
Some quick example text to build on the card title and make up the bulk of the card's content.
Header
Secondary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Header
Success card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Header
Danger card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Header
Warning card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Header
Info card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Header
Light card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Header
Dark card title
Some quick example text to build on the card title and make up the bulk of the card's content.
<div class="card text-white bg-primary mx-auto mb-3" style="max-width: 20rem;">
<div class="card-header text-white">Header</div>
<div class="card-body">
<h4 class="card-title">Primary 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>
</div>
</div>
<div class="card text-white bg-secondary mx-auto mb-3" style="max-width: 20rem;">
<div class="card-header text-white">Header</div>
<div class="card-body">
<h4 class="card-title">Secondary 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>
</div>
</div>
<div class="card text-white bg-success mx-auto mb-3" style="max-width: 20rem;">
<div class="card-header text-white">Header</div>
<div class="card-body">
<h4 class="card-title">Success 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>
</div>
</div>
<div class="card text-white bg-danger mx-auto mb-3" style="max-width: 20rem;">
<div class="card-header text-white">Header</div>
<div class="card-body">
<h4 class="card-title">Danger 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>
</div>
</div>
<div class="card text-white bg-warning mx-auto mb-3" style="max-width: 20rem;">
<div class="card-header text-white">Header</div>
<div class="card-body">
<h4 class="card-title">Warning 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>
</div>
</div>
<div class="card text-white bg-info mx-auto mb-3" style="max-width: 20rem;">
<div class="card-header text-white">Header</div>
<div class="card-body">
<h4 class="card-title">Info 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>
</div>
</div>
<div class="card bg-light mx-auto mb-3" style="max-width: 20rem;">
<div class="card-header text-black">Header</div>
<div class="card-body">
<h4 class="card-title">Light 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>
</div>
</div>
<div class="card text-white bg-dark mx-auto mb-3" style="max-width: 20rem;">
<div class="card-header text-white">Header</div>
<div class="card-body">
<h4 class="card-title">Dark 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>
</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.
Header
Primary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Header
Secondary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Header
Success card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Header
Danger card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Header
Warning card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Header
Info card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Header
Light card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Header
Dark card title
Some quick example text to build on the card title and make up the bulk of the card's content.
<div class="card border-primary mx-auto mb-3" style="max-width: 20rem;">
<div class="card-header">Header</div>
<div class="card-body text-primary">
<h4 class="card-title">Primary 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>
</div>
</div>
<div class="card border-secondary mx-auto mb-3" style="max-width: 20rem;">
<div class="card-header">Header</div>
<div class="card-body text-secondary">
<h4 class="card-title">Secondary 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>
</div>
</div>
<div class="card border-success mx-auto mb-3" style="max-width: 20rem;">
<div class="card-header">Header</div>
<div class="card-body text-success">
<h4 class="card-title">Success 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>
</div>
</div>
<div class="card border-danger mx-auto mb-3" style="max-width: 20rem;">
<div class="card-header">Header</div>
<div class="card-body text-danger">
<h4 class="card-title">Danger 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>
</div>
</div>
<div class="card border-warning mx-auto mb-3" style="max-width: 20rem;">
<div class="card-header">Header</div>
<div class="card-body text-warning">
<h4 class="card-title">Warning 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>
</div>
</div>
<div class="card border-info mx-auto mb-3" style="max-width: 20rem;">
<div class="card-header">Header</div>
<div class="card-body text-info">
<h4 class="card-title">Info 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>
</div>
</div>
<div class="card border-light mx-auto mb-3" style="max-width: 20rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h4 class="card-title">Light 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>
</div>
</div>
<div class="card border-dark mx-auto mb-3" style="max-width: 20rem;">
<div class="card-header">Header</div>
<div class="card-body text-dark">
<h4 class="card-title">Dark 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>
</div>
</div>
