1. Components
2. UI Elements
3. Cards

Cards

A flexible and extensible content container with multiple variants and options. Read the Official Bootstrap Documentation for a full list of instructions and other options.

---

Basic Example

Below is an example of a basic card with mixed content and a fixed width. Cards have no fixed width to start, so they’ll naturally fill the full width of its parent element.

<div class="card">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h6 class="card-title">Card title</h6>
    <p class="card-text">Some quick example text...</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

---

Content Types

Cards support a wide variety of content, including images, text, list groups, links, and more. Below are examples of what’s supported.

Body

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

<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

Title, Text and Links

Card titles are used by adding .card-title to a heading tag. In the same way, links are added and placed next to each other by adding .card-link to an anchor tag.

<div class="card">
  <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...</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Card Images

Places an image to the top and bottom of the card.

<div class="card">
  <img src="..." class="card-img-top" alt="">
  <div class="card-body">...</div>
</div>

<div class="card">
  <div class="card-body">...</div>
  <img src="..." class="card-img-bottom" alt="">
</div>

---

Header & Footer

Add an optional header and/or footer within a card.

<div class="card">
  <div class="card-header">Featured</div>
  <div class="card-body">...</div>
</div>

<div class="card">
  <div class="card-body">...</div>
  <div class="card-footer">...</div>
</div>

---

Card Navigation

Add some navigation to a card’s header (or block) with Bootstrap’s nav components.

<div class="card">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">...</ul>
  </div>
  <div class="card-body">...</div>
</div>

---

Image Overlay

Turn an image into a card background and overlay your card’s text.

<div class="card bg-dark text-white">
  <img src="..." class="card-img" alt="">
  <div class="card-img-overlay">
    <h5 class="card-title">Card title</h5>
    ...
  </div>
</div>

---

Background Color

Use text and background utilities to change the appearance of a card.

<div class="card tx-white bg-primary">...</div>
<div class="card tx-white bg-secondary">...</div>
<div class="card tx-white bg-success">...</div>
<div class="card tx-white bg-warning">...</div>
<div class="card tx-white bg-danger">...</div>
<div class="card tx-white bg-info">...</div>

---

Card Groups

Use card groups to render cards as a single, attached element with equal width and height columns. Card groups use flex display to achieve their uniform sizing.

<div class="card-group">
  <div class="card">...</div>
  <div class="card">...</div>
  <div class="card">...</div>
</div>

---

Card Decks

Need a set of equal width and height cards that aren’t attached to one another? Use card decks.

<div class="card-deck">
  <div class="card">...</div>
  <div class="card">...</div>
  <div class="card">...</div>
</div>

---

Card Columns

Cards can be organized into Masonry-like columns with just CSS by wrapping them in .card-columns.

<div class="card-columns">
  <div class="card">...</div>
  <div class="card">...</div>
  <div class="card">...</div>
</div>