Bootstrap cards
Bootstrap cards component provide a flexible and extensible container for displaying content. Bootstrap cards are delivered with a bunch of variants and options.
About
A Bootstrap card component is a content container. It incorporates options for images, headers, and footers, a wide variety of content, contextual background colors, and excellent display options. Bootstrap cards replace old Bootstrap panels, Bootstrap wells, and Bootstrap thumbnails.
Example
Cards are built with as little markup and styles as possible but still manage to deliver a bunch of control and customization. Built with flexbox, they offer easy alignment and mix well with other Bootstrap components. Cards have no margins by default, so use spacing utilities as needed. They have no fixed width to start, so they’ll fill the full width of its parent.
Card title
Quick sample text to create the card title and make up the body of the card's content.
Go somewhere<div class="card" style="width: 18rem;">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Quick sample text to create the card title and make up the body of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>Content types
Bootstrap cards support a wide variety of content, including images, text, list groups, links, and more. Below are examples of those elements.
Body
The main block of a card is the .card-body.
<div class="card">
<div class="card-body">
This is some text within a card body.
</div>
</div>Titles, text, and links
Card titles are managed by adding .card-title to a <h*> tag. Identically, links are attached and collected next to each other by adding .card-link to an <a> tag.
Subtitles are managed by adding a .card-subtitle to a <h*> tag. If the .card-title also, the .card-subtitle items are stored in a .card-body item, the card title, and subtitle are arranged rightly.
Card title
Card subtitle
Quick sample text to create the card title and make up the body of the card's content.
Card link Another link<div class="card" 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">Quick sample text to create the card title and make up the body 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
.card-img-top places a picture to the top of the card. With .card-text, text can be added to the card. Text within .card-text can additionally be styled with the regular HTML tags.
Quick sample text to create the card title and make up the body of the card's content.
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<p class="card-text">Quick sample text to create the card title and make up the body of the card's content.</p>
</div>
</div>List groups
Create lists of content in a card with a flush list group.
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
<div class="card" 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>- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
<div class="card" style="width: 18rem;">
<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>Kitchen sink
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.
Card title
Quick sample text to create the card title and make up the body of the card's content.
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Quick sample text to create the card title and make up the body 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 footer within a card.
Special title treatment
It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.
Go somewhere<div class="card">
<div class="card-header">
Featured
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>Card headers can be styled by adding .card-header to <h*> elements.
Featured
Special title treatment
It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.
Go somewhere<div class="card">
<h5 class="card-header">Featured</h5>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<div class="card">
<div class="card-header">
Quote
</div>
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</div>
</div>Special title treatment
It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.
Go somewhere<div class="card text-center">
<div class="card-header">
Featured
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
<div class="card-footer text-muted">
2 days ago
</div>
</div>Sizing
Cards assume no specific width to start, so they’ll be 100% wide unless otherwise stated. You can adjust this as required with custom CSS, grid classes, grid Sass mixins, or services.
Using grid markup
Using the grid, wrap cards in columns and rows as needed.
Special title treatment
It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.
Go somewhereSpecial title treatment
It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.
Go somewhere<div class="row">
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>Using utilities
Use our handful of available sizing utilities to quickly set a card’s width.
Card title
It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.
ButtonCard title
It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.
Button<div class="card w-75">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
</div>
<div class="card w-50">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
</div>Using custom CSS
Use custom CSS in your stylesheets or as inline styles to set a width.
Special title treatment
It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.
Go somewhere<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>Text arrangement
You can instantly change the text arrangement of any card—in its whole or specific parts—with text align classes.
Special title treatment
It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.
Go somewhereSpecial title treatment
It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.
Go somewhereSpecial title treatment
It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.
Go somewhere<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<div class="card text-center" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<div class="card text-right" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>Navigation
Add some navigation to a card’s header (or block) with Bootstrap’s nav components.
Special title treatment
It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.
Go somewhere<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">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>Special title treatment
It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.
Go somewhere<div class="card 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">It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>Images
Cards introduce several options for acting with images. Pick from appending “image caps” at either end of a card, overlaying images with content, or just inserting the image in a card.
Image caps
Similar to headers and footers, cards can include top and bottom “image caps”—images at the top or bottom of a card.
Card title
It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.
Last updated 3 mins ago
Card title
It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.
Last updated 3 mins ago
<div class="card mb-3">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
<img class="card-img-bottom" src="..." alt="Card image cap">
</div>Image overlays
Adapt an image into a background and overlay your text. Depending on the image, you may need additional styles or utilities.
<div class="card bg-dark text-white">
<img class="card-img" src="..." alt="Card image">
<div class="card-img-overlay">
<h5 class="card-title">Card title</h5>
<p class="card-text">It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.</p>
<p class="card-text">Last updated 3 mins ago</p>
</div>
</div>Card 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
Quick sample text to create the card title and make up the body of the card's content.
Secondary card title
Quick sample text to create the card title and make up the body of the card's content.
Success card title
Quick sample text to create the card title and make up the body of the card's content.
Danger card title
Quick sample text to create the card title and make up the body of the card's content.
Warning card title
Quick sample text to create the card title and make up the body of the card's content.
Info card title
Quick sample text to create the card title and make up the body of the card's content.
Light card title
Quick sample text to create the card title and make up the body of the card's content.
Dark card title
Quick sample text to create the card title and make up the body of the card's content.
<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Quick sample text to create the card title and make up the body of the card's content.</p>
</div>
</div>
<div class="card text-white bg-secondary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Secondary card title</h5>
<p class="card-text">Quick sample text to create the card title and make up the body of the card's content.</p>
</div>
</div>
<div class="card text-white bg-success mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Success card title</h5>
<p class="card-text">Quick sample text to create the card title and make up the body of the card's content.</p>
</div>
</div>
<div class="card text-white bg-danger mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Danger card title</h5>
<p class="card-text">Quick sample text to create the card title and make up the body of the card's content.</p>
</div>
</div>
<div class="card text-white bg-warning mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Warning card title</h5>
<p class="card-text">Quick sample text to create the card title and make up the body of the card's content.</p>
</div>
</div>
<div class="card text-white bg-info mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Info card title</h5>
<p class="card-text">Quick sample text to create the card title and make up the body of the card's content.</p>
</div>
</div>
<div class="card bg-light mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Light card title</h5>
<p class="card-text">Quick sample text to create the card title and make up the body of the card's content.</p>
</div>
</div>
<div class="card text-white bg-dark mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Dark card title</h5>
<p class="card-text">Quick sample text to create the card title and make up the body of the card's content.</p>
</div>
</div>Conveying meaning to assistive technologies
Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .sr-only class.
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
Quick sample text to create the card title and make up the body of the card's content.
Secondary card title
Quick sample text to create the card title and make up the body of the card's content.
Success card title
Quick sample text to create the card title and make up the body of the card's content.
Danger card title
Quick sample text to create the card title and make up the body of the card's content.
Warning card title
Quick sample text to create the card title and make up the body of the card's content.
Info card title
Quick sample text to create the card title and make up the body of the card's content.
Light card title
Quick sample text to create the card title and make up the body of the card's content.
Dark card title
Quick sample text to create the card title and make up the body of the card's content.
<div class="card border-primary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-primary">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Quick sample text to create the card title and make up the body of the card's content.</p>
</div>
</div>
<div class="card border-secondary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-secondary">
<h5 class="card-title">Secondary card title</h5>
<p class="card-text">Quick sample text to create the card title and make up the body of the card's content.</p>
</div>
</div>
<div class="card border-success mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-success">
<h5 class="card-title">Success card title</h5>
<p class="card-text">Quick sample text to create the card title and make up the body of the card's content.</p>
</div>
</div>
<div class="card border-danger mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-danger">
<h5 class="card-title">Danger card title</h5>
<p class="card-text">Quick sample text to create the card title and make up the body of the card's content.</p>
</div>
</div>
<div class="card border-warning mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-warning">
<h5 class="card-title">Warning card title</h5>
<p class="card-text">Quick sample text to create the card title and make up the body of the card's content.</p>
</div>
</div>
<div class="card border-info mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-info">
<h5 class="card-title">Info card title</h5>
<p class="card-text">Quick sample text to create the card title and make up the body of the card's content.</p>
</div>
</div>
<div class="card border-light mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Light card title</h5>
<p class="card-text">Quick sample text to create the card title and make up the body of the card's content.</p>
</div>
</div>
<div class="card border-dark mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-dark">
<h5 class="card-title">Dark card title</h5>
<p class="card-text">Quick sample text to create the card title and make up the body of the card's content.</p>
</div>
</div>Witch accent
Primary card title
Quick sample text to create the card title and make up the body of the card's content.
Secondary card title
Quick sample text to create the card title and make up the body of the card's content.
Success card title
Quick sample text to create the card title and make up the body of the card's content.
Danger card title
Quick sample text to create the card title and make up the body of the card's content.
Warning card title
Quick sample text to create the card title and make up the body of the card's content.
Info card title
Quick sample text to create the card title and make up the body of the card's content.
Dark card title
Quick sample text to create the card title and make up the body of the card's content.
<div class="card card-accent-primary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Quick sample text to create the card title and make up the body of the card's content.</p>
</div>
</div>
<div class="card card-accent-secondary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Secondary card title</h5>
<p class="card-text">Quick sample text to create the card title and make up the body of the card's content.</p>
</div>
</div>
<div class="card card-accent-success mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Success card title</h5>
<p class="card-text">Quick sample text to create the card title and make up the body of the card's content.</p>
</div>
</div>
<div class="card card-accent-danger mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Danger card title</h5>
<p class="card-text">Quick sample text to create the card title and make up the body of the card's content.</p>
</div>
</div>
<div class="card card-accent-warning mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Warning card title</h5>
<p class="card-text">Quick sample text to create the card title and make up the body of the card's content.</p>
</div>
</div>
<div class="card card-accent-info mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Info card title</h5>
<p class="card-text">Quick sample text to create the card title and make up the body of the card's content.</p>
</div>
</div>
<div class="card card-accent-dark mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Dark card title</h5>
<p class="card-text">Quick sample text to create the card title and make up the body of the card's content.</p>
</div>
</div>Mixins uses
You are able to adjust the borders on the card elements as needed, and even exclude their background-color with .bg-transparent.
Success card title
Quick sample text to create the card title and make up the body of the card's content.
<div class="card border-success mb-3" style="max-width: 18rem;">
<div class="card-header bg-transparent border-success">Header</div>
<div class="card-body text-success">
<h5 class="card-title">Success card title</h5>
<p class="card-text">Quick sample text to create the card title and make up the body of the card's content.</p>
</div>
<div class="card-footer bg-transparent border-success">Footer</div>
</div>Card organization & layout
Bootstrap incorporates some options for setting out series of cards.
Card groups
Use card groups to represent cards as a single, attached component with same width and height columns. Card groups use display: flex; to reach their sizing.
Card title
It's a broader card with text below as a natural lead-in to extra content. This content is a little 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
It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.This card has even longer content than the first to show that equal height action.
Last updated 3 mins ago
<div class="card-group">
<div class="card">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.</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="..." 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">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.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>
</div>When using card groups with footers, their content will automatically line up.
Card title
It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.
Card title
This card has supporting text below as a natural lead-in to additional content.
Card title
It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.This card has even longer content than the first to show that equal height action.
<div class="card-group">
<div class="card">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">It's a broader card with text below as a natural lead-in to extra content. This content is a little 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="..." 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="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.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
Use of card decks if you need a set of identical width and height cards that aren’t attached to one another.
Card title
This is a longer card It's a broader card with text below as a natural lead-in to extra content. This content is a little longer. 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
It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.This card has even longer content than the first to show that equal height action.
Last updated 3 mins ago
<div class="card-deck">
<div class="card">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card It's a broader card with text below as a natural lead-in to extra content. This content is a little longer. 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>
<div class="card">
<img class="card-img-top" src="..." 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">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.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>
</div>Just like with card groups, card footers in decks will automatically line up.
Card title
It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.
Card title
This card has supporting text below as a natural lead-in to additional content.
Card title
It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.This card has even longer content than the first to show that equal height action.
<div class="card-deck">
<div class="card">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">It's a broader card with text below as a natural lead-in to extra content. This content is a little 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="..." 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="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.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 formed into Masonry-like columns with just CSS by binding them in .card-columns. Cards are created with CSS column properties instead of flexbox for more regular alignment. Cards are arranged from top to bottom and left to right.
Card title that wraps to a new line
This is a longer card It's a broader card with text below as a natural lead-in to extra content. This content is a little longer. 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
It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.This card has even longer content than the first to show that equal height action.
Last updated 3 mins ago
<div class="card-columns">
<div class="card">
<img class="card-img-top" src="..." 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 It's a broader card with text below as a natural lead-in to extra content. This content is a little longer. This content is a little bit longer.</p>
</div>
</div>
<div class="card 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">
<img class="card-img-top" src="..." 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">
<blockquote class="blockquote mb-0">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
<footer class="blockquote-footer">
<small>
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card text-center">
<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">
<img class="card-img" src="..." alt="Card image">
</div>
<div class="card 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">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.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>
</div>Card columns can also be reached and customized with extra code. Shown below is an addition of the .card-columns class using the corresponding CSS we use—CSS columns— to make a set of responsive tiers for adjusting the number of columns.
.card-columns {
@include media-breakpoint-only(lg) {
column-count: 4;
}
@include media-breakpoint-only(xl) {
column-count: 5;
}
}Brand Cards
<div class="row">
<div class="col-sm-6 col-lg-4">
<div class="brand-card">
<div class="brand-card-header bg-behance">
<i class="fa fa-behance"></i>
</div>
<div class="brand-card-body">
<div>
<div class="text-value">89k</div>
<div class="text-uppercase text-muted small">Lorem ipsum</div>
</div>
<div>
<div class="text-value">459</div>
<div class="text-uppercase text-muted small">Lorem ipsum</div>
</div>
</div>
</div>
</div><!--/.col-->
<div class="col-sm-6 col-lg-4">
<div class="brand-card">
<div class="brand-card-header bg-css3">
<i class="fa fa-css3"></i>
</div>
<div class="brand-card-body">
<div>
<div class="text-value">89k</div>
<div class="text-uppercase text-muted small">Lorem ipsum</div>
</div>
<div>
<div class="text-value">459</div>
<div class="text-uppercase text-muted small">Lorem ipsum</div>
</div>
</div>
</div>
</div><!--/.col-->
<div class="col-sm-6 col-lg-4">
<div class="brand-card">
<div class="brand-card-header bg-dribbble">
<i class="fa fa-dribbble"></i>
</div>
<div class="brand-card-body">
<div>
<div class="text-value">89k</div>
<div class="text-uppercase text-muted small">Lorem ipsum</div>
</div>
<div>
<div class="text-value">459</div>
<div class="text-uppercase text-muted small">Lorem ipsum</div>
</div>
</div>
</div>
</div><!--/.col-->
<div class="col-sm-6 col-lg-4">
<div class="brand-card">
<div class="brand-card-header bg-dropbox">
<i class="fa fa-dropbox"></i>
</div>
<div class="brand-card-body">
<div>
<div class="text-value">89k</div>
<div class="text-uppercase text-muted small">Lorem ipsum</div>
</div>
<div>
<div class="text-value">459</div>
<div class="text-uppercase text-muted small">Lorem ipsum</div>
</div>
</div>
</div>
</div><!--/.col-->
<div class="col-sm-6 col-lg-4">
<div class="brand-card">
<div class="brand-card-header bg-facebook">
<i class="fa fa-facebook"></i>
</div>
<div class="brand-card-body">
<div>
<div class="text-value">89k</div>
<div class="text-uppercase text-muted small">Lorem ipsum</div>
</div>
<div>
<div class="text-value">459</div>
<div class="text-uppercase text-muted small">Lorem ipsum</div>
</div>
</div>
</div>
</div><!--/.col-->
<div class="col-sm-6 col-lg-4">
<div class="brand-card">
<div class="brand-card-header bg-flickr">
<i class="fa fa-flickr"></i>
</div>
<div class="brand-card-body">
<div>
<div class="text-value">89k</div>
<div class="text-uppercase text-muted small">Lorem ipsum</div>
</div>
<div>
<div class="text-value">459</div>
<div class="text-uppercase text-muted small">Lorem ipsum</div>
</div>
</div>
</div>
</div><!--/.col-->
<div class="col-sm-6 col-lg-4">
<div class="brand-card">
<div class="brand-card-header bg-github">
<i class="fa fa-github"></i>
</div>
<div class="brand-card-body">
<div>
<div class="text-value">89k</div>
<div class="text-uppercase text-muted small">Lorem ipsum</div>
</div>
<div>
<div class="text-value">459</div>
<div class="text-uppercase text-muted small">Lorem ipsum</div>
</div>
</div>
</div>
</div><!--/.col-->
<div class="col-sm-6 col-lg-4">
<div class="brand-card">
<div class="brand-card-header bg-google-plus">
<i class="fa fa-google-plus"></i>
</div>
<div class="brand-card-body">
<div>
<div class="text-value">89k</div>
<div class="text-uppercase text-muted small">Lorem ipsum</div>
</div>
<div>
<div class="text-value">459</div>
<div class="text-uppercase text-muted small">Lorem ipsum</div>
</div>
</div>
</div>
</div><!--/.col-->
<div class="col-sm-6 col-lg-4">
<div class="brand-card">
<div class="brand-card-header bg-html5">
<i class="fa fa-html5"></i>
</div>
<div class="brand-card-body">
<div>
<div class="text-value">89k</div>
<div class="text-uppercase text-muted small">Lorem ipsum</div>
</div>
<div>
<div class="text-value">459</div>
<div class="text-uppercase text-muted small">Lorem ipsum</div>
</div>
</div>
</div>
</div><!--/.col-->
<div class="col-sm-6 col-lg-4">
<div class="brand-card">
<div class="brand-card-header bg-instagram">
<i class="fa fa-instagram"></i>
</div>
<div class="brand-card-body">
<div>
<div class="text-value">89k</div>
<div class="text-uppercase text-muted small">Lorem ipsum</div>
</div>
<div>
<div class="text-value">459</div>
<div class="text-uppercase text-muted small">Lorem ipsum</div>
</div>
</div>
</div>
</div><!--/.col-->
<div class="col-sm-6 col-lg-4">
<div class="brand-card">
<div class="brand-card-header bg-linkedin">
<i class="fa fa-linkedin"></i>
</div>
<div class="brand-card-body">
<div>
<div class="text-value">89k</div>
<div class="text-uppercase text-muted small">Lorem ipsum</div>
</div>
<div>
<div class="text-value">459</div>
<div class="text-uppercase text-muted small">Lorem ipsum</div>
</div>
</div>
</div>
</div><!--/.col-->
<div class="col-sm-6 col-lg-4">
<div class="brand-card">
<div class="brand-card-header bg-openid">
<i class="fa fa-openid"></i>
</div>
<div class="brand-card-body">
<div>
<div class="text-value">89k</div>
<div class="text-uppercase text-muted small">Lorem ipsum</div>
</div>
<div>
<div class="text-value">459</div>
<div class="text-uppercase text-muted small">Lorem ipsum</div>
</div>
</div>
</div>
</div><!--/.col-->
<div class="col-sm-6 col-lg-4">
<div class="brand-card">
<div class="brand-card-header bg-pinterest">
<i class="fa fa-pinterest"></i>
</div>
<div class="brand-card-body">
<div>
<div class="text-value">89k</div>
<div class="text-uppercase text-muted small">Lorem ipsum</div>
</div>
<div>
<div class="text-value">459</div>
<div class="text-uppercase text-muted small">Lorem ipsum</div>
</div>
</div>
</div>
</div><!--/.col-->
<div class="col-sm-6 col-lg-4">
<div class="brand-card">
<div class="brand-card-header bg-reddit">
<i class="fa fa-reddit"></i>
</div>
<div class="brand-card-body">
<div>
<div class="text-value">89k</div>
<div class="text-uppercase text-muted small">Lorem ipsum</div>
</div>
<div>
<div class="text-value">459</div>
<div class="text-uppercase text-muted small">Lorem ipsum</div>
</div>
</div>
</div>
</div><!--/.col-->
<div class="col-sm-6 col-lg-4">
<div class="brand-card">
<div class="brand-card-header bg-spotify">
<i class="fa fa-spotify"></i>
</div>
<div class="brand-card-body">
<div>
<div class="text-value">89k</div>
<div class="text-uppercase text-muted small">Lorem ipsum</div>
</div>
<div>
<div class="text-value">459</div>
<div class="text-uppercase text-muted small">Lorem ipsum</div>
</div>
</div>
</div>
</div><!--/.col-->
<div class="col-sm-6 col-lg-4">
<div class="brand-card">
<div class="brand-card-header bg-stack-overflow">
<i class="fa fa-stack-overflow"></i>
</div>
<div class="brand-card-body">
<div>
<div class="text-value">89k</div>
<div class="text-uppercase text-muted small">Lorem ipsum</div>
</div>
<div>
<div class="text-value">459</div>
<div class="text-uppercase text-muted small">Lorem ipsum</div>
</div>
</div>
</div>
</div><!--/.col-->
<div class="col-sm-6 col-lg-4">
<div class="brand-card">
<div class="brand-card-header bg-tumblr">
<i class="fa fa-tumblr"></i>
</div>
<div class="brand-card-body">
<div>
<div class="text-value">89k</div>
<div class="text-uppercase text-muted small">Lorem ipsum</div>
</div>
<div>
<div class="text-value">459</div>
<div class="text-uppercase text-muted small">Lorem ipsum</div>
</div>
</div>
</div>
</div><!--/.col-->
<div class="col-sm-6 col-lg-4">
<div class="brand-card">
<div class="brand-card-header bg-twitter">
<i class="fa fa-twitter"></i>
</div>
<div class="brand-card-body">
<div>
<div class="text-value">89k</div>
<div class="text-uppercase text-muted small">Lorem ipsum</div>
</div>
<div>
<div class="text-value">459</div>
<div class="text-uppercase text-muted small">Lorem ipsum</div>
</div>
</div>
</div>
</div><!--/.col-->
<div class="col-sm-6 col-lg-4">
<div class="brand-card">
<div class="brand-card-header bg-vimeo">
<i class="fa fa-vimeo"></i>
</div>
<div class="brand-card-body">
<div>
<div class="text-value">89k</div>
<div class="text-uppercase text-muted small">Lorem ipsum</div>
</div>
<div>
<div class="text-value">459</div>
<div class="text-uppercase text-muted small">Lorem ipsum</div>
</div>
</div>
</div>
</div><!--/.col-->
<div class="col-sm-6 col-lg-4">
<div class="brand-card">
<div class="brand-card-header bg-vk">
<i class="fa fa-vk"></i>
</div>
<div class="brand-card-body">
<div>
<div class="text-value">89k</div>
<div class="text-uppercase text-muted small">Lorem ipsum</div>
</div>
<div>
<div class="text-value">459</div>
<div class="text-uppercase text-muted small">Lorem ipsum</div>
</div>
</div>
</div>
</div><!--/.col-->
<div class="col-sm-6 col-lg-4">
<div class="brand-card">
<div class="brand-card-header bg-xing">
<i class="fa fa-xing"></i>
</div>
<div class="brand-card-body">
<div>
<div class="text-value">89k</div>
<div class="text-uppercase text-muted small">Lorem ipsum</div>
</div>
<div>
<div class="text-value">459</div>
<div class="text-uppercase text-muted small">Lorem ipsum</div>
</div>
</div>
</div>
</div><!--/.col-->
<div class="col-sm-6 col-lg-4">
<div class="brand-card">
<div class="brand-card-header bg-yahoo">
<i class="fa fa-yahoo"></i>
</div>
<div class="brand-card-body">
<div>
<div class="text-value">89k</div>
<div class="text-uppercase text-muted small">Lorem ipsum</div>
</div>
<div>
<div class="text-value">459</div>
<div class="text-uppercase text-muted small">Lorem ipsum</div>
</div>
</div>
</div>
</div><!--/.col-->
<div class="col-sm-6 col-lg-4">
<div class="brand-card">
<div class="brand-card-header bg-youtube">
<i class="fa fa-youtube"></i>
</div>
<div class="brand-card-body">
<div>
<div class="text-value">89k</div>
<div class="text-uppercase text-muted small">Lorem ipsum</div>
</div>
<div>
<div class="text-value">459</div>
<div class="text-uppercase text-muted small">Lorem ipsum</div>
</div>
</div>
</div>
</div><!--/.col-->
</div><!--/.row-->