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 somewhere

Code Example

<div class="card">    <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 link Another link

Code Example

<div class="card">    <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.

Featured

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">    <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">  <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.

Featured Title

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

2 days ago

Featured Title

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Code Example

<!-- With Footer Header --><div class="card">    <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">    <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.

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

Dark 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.

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>