Cards

Quick Start

Example

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="bs-card" style="width: 40rem;">
    <div class="bs-card-body">
        <h4 class="bs-card-title">Card title</h4>
        <p class="bs-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>

Body

The building block of a card is the .bs-card-body. Use it whenever you need a padded section within a card.

This is some text within a card body. 
<div class="bs-card">
    <div class="bs-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 .bs-card-link to an tag. Subtitles are used by adding a .bs-card-subtitle to a <h*> tag. If the .bs-card-title and the .bs-card-subtitle items are placed in a .bs-card-body item, the card title and subtitle are aligned nicely.

Example

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="bs-card" style="width: 40rem;">
    <div class="bs-card-body">
        <h4 class="bs-card-title">Card title</h4>
        <h6 class="bs-card-subtitle mb-2 text-muted">Card subtitle</h6>
        <p class="bs-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="bs-card-link">Card link</a>
        <a href="#" class="bs-card-link">Another link</a>
    </div>
</div>

List groups

Create lists of content in a card with a flush list group.

Example
  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros
<div class="bs-card" style="width: 40rem;">
    <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>