🎉 Limited offer! Get a Pro license and save up to $1.000. 🎉 Learn more

Bootstrap cards

Bootstrap cards component provide a flexible and extensible container for displaying content. Bootstrap cards are delivered with a bunch of variants and options.

About

A Bootstrap card component is a content container. It incorporates options for images, headers, and footers, a wide variety of content, contextual background colors, and excellent display options. Bootstrap cards replace old Bootstrap panels, Bootstrap wells, and Bootstrap thumbnails.

Example

Cards are built with as little markup and styles as possible but still manage to deliver a bunch of control and customization. Built with flexbox, they offer easy alignment and mix well with other Bootstrap components. Cards have no margins by default, so use spacing utilities as needed. They have no fixed width to start, so they’ll fill the full width of its parent.

Card image cap
Card title

Quick sample text to create the card title and make up the body of the card's content.

Go somewhere
<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Quick sample text to create the card title and make up the body of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Content types

Bootstrap cards support a wide variety of content, including images, text, list groups, links, and more. Below are examples of those elements.

Body

The main block of a card is the .card-body.

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

Card titles are managed by adding .card-title to a <h*> tag. Identically, links are attached and collected next to each other by adding .card-link to an <a> tag.

Subtitles are managed by adding a .card-subtitle to a <h*> tag. If the .card-title also, the .card-subtitle items are stored in a .card-body item, the card title, and subtitle are arranged rightly.

Card title
Card subtitle

Quick sample text to create the card title and make up the body of the card's content.

Card link Another link
<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">Quick sample text to create the card title and make up the body of the card's content.</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Images

.card-img-top places a picture to the top of the card. With .card-text, text can be added to the card. Text within .card-text can additionally be styled with the regular HTML tags.

Card image cap

Quick sample text to create the card title and make up the body of the card's content.

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <div class="card-body">
    <p class="card-text">Quick sample text to create the card title and make up the body of the card's content.</p>
  </div>
</div>

List groups

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

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

Kitchen sink

Mix and match multiple content types to create the card you need, or throw everything in there. Shown below are image styles, blocks, text styles, and a list group—all wrapped in a fixed-width card.

Card image cap
Card title

Quick sample text to create the card title and make up the body of the card's content.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros
<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Quick sample text to create the card title and make up the body of the card's content.</p>
  </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 class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Add an optional header and footer within a card.

Featured
Special title treatment

It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.

Go somewhere
<div class="card">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Card headers can be styled by adding .card-header to <h*> elements.

Featured
Special title treatment

It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.

Go somewhere
<div class="card">
  <h5 class="card-header">Featured</h5>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
Quote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
<div class="card">
  <div class="card-header">
    Quote
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>
Featured
Special title treatment

It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.

Go somewhere
<div class="card text-center">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
  <div class="card-footer text-muted">
    2 days ago
  </div>
</div>

Sizing

Cards assume no specific width to start, so they’ll be 100% wide unless otherwise stated. You can adjust this as required with custom CSS, grid classes, grid Sass mixins, or services.

Using grid markup

Using the grid, wrap cards in columns and rows as needed.

Special title treatment

It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.

Go somewhere
Special title treatment

It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.

Go somewhere
<div class="row">
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
</div>

Using utilities

Use our handful of available sizing utilities to quickly set a card’s width.

Card title

It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.

Button
Card title

It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.

Button
<div class="card w-75">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

<div class="card w-50">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

Using custom CSS

Use custom CSS in your stylesheets or as inline styles to set a width.

Special title treatment

It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.

Go somewhere
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Text arrangement

You can instantly change the text arrangement of any card—in its whole or specific parts—with text align classes.

Special title treatment

It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.

Go somewhere
Special title treatment

It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.

Go somewhere
Special title treatment

It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.

Go somewhere
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card text-center" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card text-right" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

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

Special title treatment

It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.

Go somewhere
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
Special title treatment

It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.

Go somewhere
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-pills card-header-pills">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Images

Cards introduce several options for acting with images. Pick from appending “image caps” at either end of a card, overlaying images with content, or just inserting the image in a card.

Image caps

Similar to headers and footers, cards can include top and bottom “image caps”—images at the top or bottom of a card.

Card image cap
Card title

It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.

Last updated 3 mins ago

Card title

It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.

Last updated 3 mins ago

Card image cap
<div class="card mb-3">
  <img class="card-img-top" src="..." alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
</div>
<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
  <img class="card-img-bottom" src="..." alt="Card image cap">
</div>

Image overlays

Adapt an image into a background and overlay your text. Depending on the image, you may need additional styles or utilities.

Card image
Card title

It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.

Last updated 3 mins ago

<div class="card bg-dark text-white">
  <img class="card-img" src="..." alt="Card image">
  <div class="card-img-overlay">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.</p>
    <p class="card-text">Last updated 3 mins ago</p>
  </div>
</div>

Card styles

Cards include various options for customizing their backgrounds, borders, and color.

Background and color

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

Header
Primary card title

Quick sample text to create the card title and make up the body of the card's content.

Header
Secondary card title

Quick sample text to create the card title and make up the body of the card's content.

Header
Success card title

Quick sample text to create the card title and make up the body of the card's content.

Header
Danger card title

Quick sample text to create the card title and make up the body of the card's content.

Header
Warning card title

Quick sample text to create the card title and make up the body of the card's content.

Header
Info card title

Quick sample text to create the card title and make up the body of the card's content.

Header
Light card title

Quick sample text to create the card title and make up the body of the card's content.

Header
Dark card title

Quick sample text to create the card title and make up the body of the card's content.

<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Quick sample text to create the card title and make up the body of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Secondary card title</h5>
    <p class="card-text">Quick sample text to create the card title and make up the body of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Quick sample text to create the card title and make up the body of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Danger card title</h5>
    <p class="card-text">Quick sample text to create the card title and make up the body of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Warning card title</h5>
    <p class="card-text">Quick sample text to create the card title and make up the body of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Quick sample text to create the card title and make up the body of the card's content.</p>
  </div>
</div>
<div class="card bg-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Quick sample text to create the card title and make up the body of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Quick sample text to create the card title and make up the body of the card's content.</p>
  </div>
</div>
Conveying meaning to assistive technologies

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .sr-only class.

Border

Use border utilities to change just the border-color of a card. Note that you can put .text-{color} classes on the parent .card or a subset of the card’s contents as shown below.

Header
Primary card title

Quick sample text to create the card title and make up the body of the card's content.

Header
Secondary card title

Quick sample text to create the card title and make up the body of the card's content.

Header
Success card title

Quick sample text to create the card title and make up the body of the card's content.

Header
Danger card title

Quick sample text to create the card title and make up the body of the card's content.

Header
Warning card title

Quick sample text to create the card title and make up the body of the card's content.

Header
Info card title

Quick sample text to create the card title and make up the body of the card's content.

Header
Light card title

Quick sample text to create the card title and make up the body of the card's content.

Header
Dark card title

Quick sample text to create the card title and make up the body of the card's content.

<div class="card border-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-primary">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Quick sample text to create the card title and make up the body of the card's content.</p>
  </div>
</div>
<div class="card border-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-secondary">
    <h5 class="card-title">Secondary card title</h5>
    <p class="card-text">Quick sample text to create the card title and make up the body of the card's content.</p>
  </div>
</div>
<div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-success">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Quick sample text to create the card title and make up the body of the card's content.</p>
  </div>
</div>
<div class="card border-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-danger">
    <h5 class="card-title">Danger card title</h5>
    <p class="card-text">Quick sample text to create the card title and make up the body of the card's content.</p>
  </div>
</div>
<div class="card border-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-warning">
    <h5 class="card-title">Warning card title</h5>
    <p class="card-text">Quick sample text to create the card title and make up the body of the card's content.</p>
  </div>
</div>
<div class="card border-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-info">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Quick sample text to create the card title and make up the body of the card's content.</p>
  </div>
</div>
<div class="card border-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Quick sample text to create the card title and make up the body of the card's content.</p>
  </div>
</div>
<div class="card border-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-dark">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Quick sample text to create the card title and make up the body of the card's content.</p>
  </div>
</div>

Witch accent

Header
Primary card title

Quick sample text to create the card title and make up the body of the card's content.

Header
Secondary card title

Quick sample text to create the card title and make up the body of the card's content.

Header
Success card title

Quick sample text to create the card title and make up the body of the card's content.

Header
Danger card title

Quick sample text to create the card title and make up the body of the card's content.

Header
Warning card title

Quick sample text to create the card title and make up the body of the card's content.

Header
Info card title

Quick sample text to create the card title and make up the body of the card's content.

Header
Dark card title

Quick sample text to create the card title and make up the body of the card's content.

<div class="card card-accent-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Quick sample text to create the card title and make up the body of the card's content.</p>
  </div>
</div>
<div class="card card-accent-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Secondary card title</h5>
    <p class="card-text">Quick sample text to create the card title and make up the body of the card's content.</p>
  </div>
</div>
<div class="card card-accent-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Quick sample text to create the card title and make up the body of the card's content.</p>
  </div>
</div>
<div class="card card-accent-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Danger card title</h5>
    <p class="card-text">Quick sample text to create the card title and make up the body of the card's content.</p>
  </div>
</div>
<div class="card card-accent-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Warning card title</h5>
    <p class="card-text">Quick sample text to create the card title and make up the body of the card's content.</p>
  </div>
</div>
<div class="card card-accent-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Quick sample text to create the card title and make up the body of the card's content.</p>
  </div>
</div>
<div class="card card-accent-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Quick sample text to create the card title and make up the body of the card's content.</p>
  </div>
</div>

Mixins uses

You are able to adjust the borders on the card elements as needed, and even exclude their background-color with .bg-transparent.

Header
Success card title

Quick sample text to create the card title and make up the body of the card's content.

<div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header bg-transparent border-success">Header</div>
  <div class="card-body text-success">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Quick sample text to create the card title and make up the body of the card's content.</p>
  </div>
  <div class="card-footer bg-transparent border-success">Footer</div>
</div>

Card organization & layout

Bootstrap incorporates some options for setting out series of cards.

Card groups

Use card groups to represent cards as a single, attached component with same width and height columns. Card groups use display: flex; to reach their sizing.

Card image cap
Card title

It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.

Last updated 3 mins ago

Card image cap
Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Card image cap
Card title

It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago

<div class="card-group">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

When using card groups with footers, their content will automatically line up.

Card image cap
Card title

It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.

Card image cap
Card title

This card has supporting text below as a natural lead-in to additional content.

Card image cap
Card title

It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.This card has even longer content than the first to show that equal height action.

<div class="card-group">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.This card has even longer content than the first to show that equal height action.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
</div>

Card decks

Use of card decks if you need a set of identical width and height cards that aren’t attached to one another.

Card image cap
Card title

This is a longer card It's a broader card with text below as a natural lead-in to extra content. This content is a little longer. This content is a little bit longer.

Last updated 3 mins ago

Card image cap
Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Card image cap
Card title

It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a longer card It's a broader card with text below as a natural lead-in to extra content. This content is a little longer. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

Just like with card groups, card footers in decks will automatically line up.

Card image cap
Card title

It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.

Card image cap
Card title

This card has supporting text below as a natural lead-in to additional content.

Card image cap
Card title

It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.This card has even longer content than the first to show that equal height action.

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.This card has even longer content than the first to show that equal height action.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
</div>

Card columns

Cards can be formed into Masonry-like columns with just CSS by binding them in .card-columns. Cards are created with CSS column properties instead of flexbox for more regular alignment. Cards are arranged from top to bottom and left to right.

Card image cap
Card title that wraps to a new line

This is a longer card It's a broader card with text below as a natural lead-in to extra content. This content is a little longer. This content is a little bit longer.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
Card image cap
Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.

Someone famous in Source Title
Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Card image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
Card title

It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago

<div class="card-columns">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title that wraps to a new line</h5>
      <p class="card-text">This is a longer card It's a broader card with text below as a natural lead-in to extra content. This content is a little longer. This content is a little bit longer.</p>
    </div>
  </div>
  <div class="card p-3">
    <blockquote class="blockquote mb-0 card-body">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card bg-primary text-white text-center p-3">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
      <footer class="blockquote-footer">
        <small>
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card text-center">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img" src="..." alt="Card image">
  </div>
  <div class="card p-3 text-right">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

Card columns can also be reached and customized with extra code. Shown below is an addition of the .card-columns class using the corresponding CSS we use—CSS columns— to make a set of responsive tiers for adjusting the number of columns.

.card-columns {
  @include media-breakpoint-only(lg) {
    column-count: 4;
  }
  @include media-breakpoint-only(xl) {
    column-count: 5;
  }
}

Brand Cards

89k
Lorem ipsum
459
Lorem ipsum
89k
Lorem ipsum
459
Lorem ipsum
89k
Lorem ipsum
459
Lorem ipsum
89k
Lorem ipsum
459
Lorem ipsum
89k
Lorem ipsum
459
Lorem ipsum
89k
Lorem ipsum
459
Lorem ipsum
89k
Lorem ipsum
459
Lorem ipsum
89k
Lorem ipsum
459
Lorem ipsum
89k
Lorem ipsum
459
Lorem ipsum
89k
Lorem ipsum
459
Lorem ipsum
89k
Lorem ipsum
459
Lorem ipsum
89k
Lorem ipsum
459
Lorem ipsum
89k
Lorem ipsum
459
Lorem ipsum
89k
Lorem ipsum
459
Lorem ipsum
89k
Lorem ipsum
459
Lorem ipsum
89k
Lorem ipsum
459
Lorem ipsum
89k
Lorem ipsum
459
Lorem ipsum
89k
Lorem ipsum
459
Lorem ipsum
89k
Lorem ipsum
459
Lorem ipsum
89k
Lorem ipsum
459
Lorem ipsum
89k
Lorem ipsum
459
Lorem ipsum
89k
Lorem ipsum
459
Lorem ipsum
89k
Lorem ipsum
459
Lorem ipsum
<div class="row">
  <div class="col-sm-6 col-lg-4">
    <div class="brand-card">
      <div class="brand-card-header bg-behance">
        <i class="fa fa-behance"></i>
      </div>
      <div class="brand-card-body">
        <div>
          <div class="text-value">89k</div>
          <div class="text-uppercase text-muted small">Lorem ipsum</div>
        </div>
        <div>
          <div class="text-value">459</div>
          <div class="text-uppercase text-muted small">Lorem ipsum</div>
        </div>
      </div>
    </div>
  </div><!--/.col-->
  <div class="col-sm-6 col-lg-4">
    <div class="brand-card">
      <div class="brand-card-header bg-css3">
        <i class="fa fa-css3"></i>
      </div>
      <div class="brand-card-body">
        <div>
          <div class="text-value">89k</div>
          <div class="text-uppercase text-muted small">Lorem ipsum</div>
        </div>
        <div>
          <div class="text-value">459</div>
          <div class="text-uppercase text-muted small">Lorem ipsum</div>
        </div>
      </div>
    </div>
  </div><!--/.col-->
  <div class="col-sm-6 col-lg-4">
    <div class="brand-card">
      <div class="brand-card-header bg-dribbble">
        <i class="fa fa-dribbble"></i>
      </div>
      <div class="brand-card-body">
        <div>
          <div class="text-value">89k</div>
          <div class="text-uppercase text-muted small">Lorem ipsum</div>
        </div>
        <div>
          <div class="text-value">459</div>
          <div class="text-uppercase text-muted small">Lorem ipsum</div>
        </div>
      </div>
    </div>
  </div><!--/.col-->
  <div class="col-sm-6 col-lg-4">
    <div class="brand-card">
      <div class="brand-card-header bg-dropbox">
        <i class="fa fa-dropbox"></i>
      </div>
      <div class="brand-card-body">
        <div>
          <div class="text-value">89k</div>
          <div class="text-uppercase text-muted small">Lorem ipsum</div>
        </div>
        <div>
          <div class="text-value">459</div>
          <div class="text-uppercase text-muted small">Lorem ipsum</div>
        </div>
      </div>
    </div>
  </div><!--/.col-->
  <div class="col-sm-6 col-lg-4">
    <div class="brand-card">
      <div class="brand-card-header bg-facebook">
        <i class="fa fa-facebook"></i>
      </div>
      <div class="brand-card-body">
        <div>
          <div class="text-value">89k</div>
          <div class="text-uppercase text-muted small">Lorem ipsum</div>
        </div>
        <div>
          <div class="text-value">459</div>
          <div class="text-uppercase text-muted small">Lorem ipsum</div>
        </div>
      </div>
    </div>
  </div><!--/.col-->
  <div class="col-sm-6 col-lg-4">
    <div class="brand-card">
      <div class="brand-card-header bg-flickr">
        <i class="fa fa-flickr"></i>
      </div>
      <div class="brand-card-body">
        <div>
          <div class="text-value">89k</div>
          <div class="text-uppercase text-muted small">Lorem ipsum</div>
        </div>
        <div>
          <div class="text-value">459</div>
          <div class="text-uppercase text-muted small">Lorem ipsum</div>
        </div>
      </div>
    </div>
  </div><!--/.col-->
  <div class="col-sm-6 col-lg-4">
    <div class="brand-card">
      <div class="brand-card-header bg-github">
        <i class="fa fa-github"></i>
      </div>
      <div class="brand-card-body">
        <div>
          <div class="text-value">89k</div>
          <div class="text-uppercase text-muted small">Lorem ipsum</div>
        </div>
        <div>
          <div class="text-value">459</div>
          <div class="text-uppercase text-muted small">Lorem ipsum</div>
        </div>
      </div>
    </div>
  </div><!--/.col-->
  <div class="col-sm-6 col-lg-4">
    <div class="brand-card">
      <div class="brand-card-header bg-google-plus">
        <i class="fa fa-google-plus"></i>
      </div>
      <div class="brand-card-body">
        <div>
          <div class="text-value">89k</div>
          <div class="text-uppercase text-muted small">Lorem ipsum</div>
        </div>
        <div>
          <div class="text-value">459</div>
          <div class="text-uppercase text-muted small">Lorem ipsum</div>
        </div>
      </div>
    </div>
  </div><!--/.col-->
  <div class="col-sm-6 col-lg-4">
    <div class="brand-card">
      <div class="brand-card-header bg-html5">
        <i class="fa fa-html5"></i>
      </div>
      <div class="brand-card-body">
        <div>
          <div class="text-value">89k</div>
          <div class="text-uppercase text-muted small">Lorem ipsum</div>
        </div>
        <div>
          <div class="text-value">459</div>
          <div class="text-uppercase text-muted small">Lorem ipsum</div>
        </div>
      </div>
    </div>
  </div><!--/.col-->
  <div class="col-sm-6 col-lg-4">
    <div class="brand-card">
      <div class="brand-card-header bg-instagram">
        <i class="fa fa-instagram"></i>
      </div>
      <div class="brand-card-body">
        <div>
          <div class="text-value">89k</div>
          <div class="text-uppercase text-muted small">Lorem ipsum</div>
        </div>
        <div>
          <div class="text-value">459</div>
          <div class="text-uppercase text-muted small">Lorem ipsum</div>
        </div>
      </div>
    </div>
  </div><!--/.col-->
  <div class="col-sm-6 col-lg-4">
    <div class="brand-card">
      <div class="brand-card-header bg-linkedin">
        <i class="fa fa-linkedin"></i>
      </div>
      <div class="brand-card-body">
        <div>
          <div class="text-value">89k</div>
          <div class="text-uppercase text-muted small">Lorem ipsum</div>
        </div>
        <div>
          <div class="text-value">459</div>
          <div class="text-uppercase text-muted small">Lorem ipsum</div>
        </div>
      </div>
    </div>
  </div><!--/.col-->
  <div class="col-sm-6 col-lg-4">
    <div class="brand-card">
      <div class="brand-card-header bg-openid">
        <i class="fa fa-openid"></i>
      </div>
      <div class="brand-card-body">
        <div>
          <div class="text-value">89k</div>
          <div class="text-uppercase text-muted small">Lorem ipsum</div>
        </div>
        <div>
          <div class="text-value">459</div>
          <div class="text-uppercase text-muted small">Lorem ipsum</div>
        </div>
      </div>
    </div>
  </div><!--/.col-->
  <div class="col-sm-6 col-lg-4">
    <div class="brand-card">
      <div class="brand-card-header bg-pinterest">
        <i class="fa fa-pinterest"></i>
      </div>
      <div class="brand-card-body">
        <div>
          <div class="text-value">89k</div>
          <div class="text-uppercase text-muted small">Lorem ipsum</div>
        </div>
        <div>
          <div class="text-value">459</div>
          <div class="text-uppercase text-muted small">Lorem ipsum</div>
        </div>
      </div>
    </div>
  </div><!--/.col-->
  <div class="col-sm-6 col-lg-4">
    <div class="brand-card">
      <div class="brand-card-header bg-reddit">
        <i class="fa fa-reddit"></i>
      </div>
      <div class="brand-card-body">
        <div>
          <div class="text-value">89k</div>
          <div class="text-uppercase text-muted small">Lorem ipsum</div>
        </div>
        <div>
          <div class="text-value">459</div>
          <div class="text-uppercase text-muted small">Lorem ipsum</div>
        </div>
      </div>
    </div>
  </div><!--/.col-->
  <div class="col-sm-6 col-lg-4">
    <div class="brand-card">
      <div class="brand-card-header bg-spotify">
        <i class="fa fa-spotify"></i>
      </div>
      <div class="brand-card-body">
        <div>
          <div class="text-value">89k</div>
          <div class="text-uppercase text-muted small">Lorem ipsum</div>
        </div>
        <div>
          <div class="text-value">459</div>
          <div class="text-uppercase text-muted small">Lorem ipsum</div>
        </div>
      </div>
    </div>
  </div><!--/.col-->
  <div class="col-sm-6 col-lg-4">
    <div class="brand-card">
      <div class="brand-card-header bg-stack-overflow">
        <i class="fa fa-stack-overflow"></i>
      </div>
      <div class="brand-card-body">
        <div>
          <div class="text-value">89k</div>
          <div class="text-uppercase text-muted small">Lorem ipsum</div>
        </div>
        <div>
          <div class="text-value">459</div>
          <div class="text-uppercase text-muted small">Lorem ipsum</div>
        </div>
      </div>
    </div>
  </div><!--/.col-->
  <div class="col-sm-6 col-lg-4">
    <div class="brand-card">
      <div class="brand-card-header bg-tumblr">
        <i class="fa fa-tumblr"></i>
      </div>
      <div class="brand-card-body">
        <div>
          <div class="text-value">89k</div>
          <div class="text-uppercase text-muted small">Lorem ipsum</div>
        </div>
        <div>
          <div class="text-value">459</div>
          <div class="text-uppercase text-muted small">Lorem ipsum</div>
        </div>
      </div>
    </div>
  </div><!--/.col-->
  <div class="col-sm-6 col-lg-4">
    <div class="brand-card">
      <div class="brand-card-header bg-twitter">
        <i class="fa fa-twitter"></i>
      </div>
      <div class="brand-card-body">
        <div>
          <div class="text-value">89k</div>
          <div class="text-uppercase text-muted small">Lorem ipsum</div>
        </div>
        <div>
          <div class="text-value">459</div>
          <div class="text-uppercase text-muted small">Lorem ipsum</div>
        </div>
      </div>
    </div>
  </div><!--/.col-->
  <div class="col-sm-6 col-lg-4">
    <div class="brand-card">
      <div class="brand-card-header bg-vimeo">
        <i class="fa fa-vimeo"></i>
      </div>
      <div class="brand-card-body">
        <div>
          <div class="text-value">89k</div>
          <div class="text-uppercase text-muted small">Lorem ipsum</div>
        </div>
        <div>
          <div class="text-value">459</div>
          <div class="text-uppercase text-muted small">Lorem ipsum</div>
        </div>
      </div>
    </div>
  </div><!--/.col-->
  <div class="col-sm-6 col-lg-4">
    <div class="brand-card">
      <div class="brand-card-header bg-vk">
        <i class="fa fa-vk"></i>
      </div>
      <div class="brand-card-body">
        <div>
          <div class="text-value">89k</div>
          <div class="text-uppercase text-muted small">Lorem ipsum</div>
        </div>
        <div>
          <div class="text-value">459</div>
          <div class="text-uppercase text-muted small">Lorem ipsum</div>
        </div>
      </div>
    </div>
  </div><!--/.col-->
  <div class="col-sm-6 col-lg-4">
    <div class="brand-card">
      <div class="brand-card-header bg-xing">
        <i class="fa fa-xing"></i>
      </div>
      <div class="brand-card-body">
        <div>
          <div class="text-value">89k</div>
          <div class="text-uppercase text-muted small">Lorem ipsum</div>
        </div>
        <div>
          <div class="text-value">459</div>
          <div class="text-uppercase text-muted small">Lorem ipsum</div>
        </div>
      </div>
    </div>
  </div><!--/.col-->
  <div class="col-sm-6 col-lg-4">
    <div class="brand-card">
      <div class="brand-card-header bg-yahoo">
        <i class="fa fa-yahoo"></i>
      </div>
      <div class="brand-card-body">
        <div>
          <div class="text-value">89k</div>
          <div class="text-uppercase text-muted small">Lorem ipsum</div>
        </div>
        <div>
          <div class="text-value">459</div>
          <div class="text-uppercase text-muted small">Lorem ipsum</div>
        </div>
      </div>
    </div>
  </div><!--/.col-->
  <div class="col-sm-6 col-lg-4">
    <div class="brand-card">
      <div class="brand-card-header bg-youtube">
        <i class="fa fa-youtube"></i>
      </div>
      <div class="brand-card-body">
        <div>
          <div class="text-value">89k</div>
          <div class="text-uppercase text-muted small">Lorem ipsum</div>
        </div>
        <div>
          <div class="text-value">459</div>
          <div class="text-uppercase text-muted small">Lorem ipsum</div>
        </div>
      </div>
    </div>
  </div><!--/.col-->
</div><!--/.row-->