Skip to main content
bootstrap-ng

Search the docs

Card

A flexible content container with a header, footer, images and theme variants. Cards are plain markup, so there is no directive.

Bootstrap’s card docs describe the markup and CSS.

Example

Build cards with .card, .card-body, .card-title and .card-text.

Card title

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

Go somewhere
HTML
<div class="card" style="width: 18rem">
  <div class="card-body">
    <h3 class="card-title h5">Card title</h3>
    <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 bsButton theme="primary" href="#">Go somewhere</a>
  </div>
</div>

Add .card-header and .card-footer, and use a flush list group inside.

Featured
  • An item
  • A second item
  • A third item
2 days ago
HTML
<div class="card" style="width: 18rem">
  <div class="card-header">Featured</div>
  <ul bsListGroup flush>
    <li bsListGroupItem>An item</li>
    <li bsListGroupItem>A second item</li>
    <li bsListGroupItem>A third item</li>
  </ul>
  <div class="card-footer fg-2">2 days ago</div>
</div>

Theme variants

Add a .theme-* class to color a card.

Primary

A primary themed card.

Success

A success themed card.

HTML
<div class="hstack gap-3 flex-wrap">
  <div class="card theme-primary" style="width: 14rem">
    <div class="card-body">
      <h3 class="card-title h5">Primary</h3>
      <p class="card-text">A primary themed card.</p>
    </div>
  </div>
  <div class="card theme-success" style="width: 14rem">
    <div class="card-body">
      <h3 class="card-title h5">Success</h3>
      <p class="card-text">A success themed card.</p>
    </div>
  </div>
</div>