Card Boxed
Cards provide a flexible and extensible content container with multiple variants and options.
Basic Examples
Cards are built with as little markup and styles as possible, but still manage to deliver a ton of control and customization.
Card with stretched link
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereCode Example
<div class="card card-bordered"> <img src="..." class="card-img-top" alt=""> <div class="card-inner"> <h5 class="card-title">Card with stretched link</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>
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.
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 linkAnother linkCode Example
<div class="card card-bordered"> <div class="card-inner"> <h5 class="card-title">Card title</h5> <h6 class="card-subtitle mb-2">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>
List groups
Create lists of content in a card with a flush list group.
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
Code Example
<!-- With Header --><div class="card card-bordered"> <div class="card-header border-bottom">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><!-- No Header --><div class="card card-bordered"> <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.
Special title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhereSpecial title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhereCode Example
<!-- With Footer Header --><div class="card card-bordered"> <div class="card-header border-bottom">Featured Title</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 border-top text-muted">2 days ago</div></div><!-- With Only Header --><div class="card card-bordered"> <div class="card-header border-bottom">Featured Title</div> <div class="card-inner"> <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>
Card Styles
Cards include various options for customizing their backgrounds, borders, and color.
Use colors 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.
Secondary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Dark card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Light card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Code Example
<div class="card text-white bg-primary"> <div class="card-header">Header</div> <div class="card-inner"> <h5 class="card-title">Primary 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> </div></div>
