Cards

XS

Portrait Phones
<576px

SM

Landscape Phones
≥576px to <768px

MD

Tablets
≥768px to <992px

LG

Laptops
≥992px to <1200px

XL

Desktops
≥1200px

Card

.card & .card-title & .card-body &
.card-subtitle & .card-text & .card-link
...
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
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
...

Some quick example text to build on the card title and make up the bulk of the card's content.

List groups

.card & .list-group &
.list-group-flush & .list-group-item
  • An item
  • A second item
  • A third item
Card
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">
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>
<a href="#" class="btn btn-primary">
Go somewhere
</a>
</div>
</div>

A card is a flexible and extensible content container. 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.

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

A card is a flexible and extensible content container. 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.

Card [Images top]
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<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>
Images

.card-img-top places an image to the top of the card. With .card-text, text can be added to the card. Text within .card-text can also be styled with the standard HTML tags.

List Group
<div class="card" style="width: 18rem;">
<ul class="list-group list-group-flush">
<li class="list-group-item">
An item
</li>
<li class="list-group-item">
A second item
</li>
<li class="list-group-item">
A third item
</li>
</ul>
</div>