Cards

A card is a flexible and extensible content container. It includes options for headers, footers, and a wide variety of content.

Powerful display options

Cards require a small amount of markup and classes. If your card has no flush content like images, feel free to put the .card-block class on the .card element. If you’re familiar with Bootstrap 3, cards replace our old panels, wells, and thumbnails.

Card image cap

Card title

Some quick example text to build on the card's content.

Go somewhere 
<div class="card">
  <img class="card-img-top" src="..." alt="Card image cap">
  <div class="card-header"><h4 class="card-title">Card title</h4></div>
  <div class="card-block">
    <p>Some quick example text to build on the card's content.</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.

Card image cap

Card title

  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros
<div class="card">
  <img class="card-img-top" src="..." alt="Card image cap">
  <div class="card-header">
    <h4 class="card-title mb-0">Card title</h4> 
  </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>

Lists can be added to a card by adding a list group.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros
<div class="card">
  <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>

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

Card image cap

Some quick example text to build on the card's content.

<div class="card">
  <img class="card-img-top" src="..." alt="Card image cap">
  <div class="card-block">
    <p>Some quick example text to build on the card's content.</p>
  </div>
</div>

Card block style

Use .card.card-block when you do not need header and footer in the contents of card.

Card title

Some quick example text to build on the card's content.

<div class="card card-block">  
    <h4 class="card-title">Card title</h4>  
    <p class="mb-0">Some quick example text to build on the card's content.</p>
</div>

Header with dropdown options

Edit Delete

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere 
<div class="card text-xs-center">
  <div class="card-header">
    <div class="dropdown dropdown-options">
    <a class="btn btn-link btn-sm" href="https://example.com" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <i class="icon icon-nav-show-vertical icon-2x"></i>
    </a>
    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
      <a class="dropdown-item" href="#"><span class="icon icon-pencil mr-1"></span> Edit</a>
      <a class="dropdown-item" href="#"><span class="icon icon-bin mr-1"></span> Delete</a>
    </div>
  </div>
  </div>
  <div class="card-block">
    <h4 class="card-title">Special title treatment</h4>
		<p>With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Header with close

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere 
<div class="card w-100">
  <div class="card-header">
    <h3 class="card-title">Special title treatment</h3>
    <button type="button" class="btn-close" aria-label="Close">
      <span class="icon icon-close icon-2x"></span>
      <span class="btn-close-label hidden-sm-down">esc</span>
    </button>
  </div>
  <div class="card-block">
    <p>With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Image caps

Similar to headers and footers, cards include top and bottom image caps.

Card image cap

Card title

This is a wider card with supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

<div class="card">
  <img class="card-img-top" src="..." alt="Card image cap">
  <div class="card-header">
    <h4 class="card-title">Card title</h4>
  </div>
  <div class="card-block">
    <p>This is a wider card with supporting text below as a natural lead-in to additional content.</p>
    <p><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
</div>

Image overlays

Turn an image into a card background and overlay your card’s text. Depending on the image, you may or may not need .card-inverse.

Card image

I love cats!

This is a wider card with supporting text below as a natural lead-in to additional content.

<div class="card card-inverse">
  <img class="card-img img-fluid" src="http://placekitten.com/370/250" alt="Card image">
  <div class="card-img-overlay">
    <h4 class="card-title">I love cats!</h4>
    <p class="text-white">This is a wider card with supporting text below as a natural lead-in to additional content.</p> 
  </div>
</div>

Background variants

Cards include their own variant classes for quickly changing the background-color and border-color of a card.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<div class="card card-inverse card-{color} text-xs-center">
  <div class="card-block">
    <blockquote class="card-blockquote">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </blockquote>
  </div>
</div>

Outline variants

In need of a colored card, but not the hefty background colors they bring? Replace the default modifier classes with the .card-outline-* ones to style just the border-color of a card.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<div class="card card-outline-{color} text-xs-center">
  <div class="card-block">
    <blockquote class="card-blockquote">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </blockquote>
  </div>
</div>

Groups

Use card groups to render cards as a single, attached element with equal width and height columns. By default, card groups use display: table; and table-layout: fixed; to achieve their uniform sizing.

Only applies to small devices and above.

Card image cap

Card title

This is a wider card with supporting text below as a natural lead-in to additional content.

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

This is a wider card with supporting text below as a natural lead-in to additional content.

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-header">
      <h4 class="card-title">Card title</h4>
    </div>
    <div class="card-block">
      <p>This is a wider card with supporting text below as a natural lead-in to additional content.</p>
      <p><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-header">
      <h4 class="card-title">Card title</h4>
    </div>
    <div class="card-block">
      <p>This card has supporting text below as a natural lead-in to additional content.</p>
      <p><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-header">
      <h4 class="card-title">Card title</h4>
    </div>
    <div class="card-block">
      <p>This is a wider card with supporting text below as a natural lead-in to additional content.</p>
      <p><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

Decks

Set equal width and height cards using card decks. By default, card decks require two wrapping elements: .card-deck-wrapper and a .card-deck. We use table styles for the sizing and the gutters on .card-deck. The .card-deck-wrapper is used to negative margin out the border-spacing on the .card-deck.

Only applies to small devices and above.

Card image cap

Card title

This is a longer card with supporting text below as a natural lead-in to additional content.

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

This is a wider card with supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

<div class="card-deck-wrapper">
  <div class="card-deck">
    <div class="card">
      <img class="card-img-top" src="..." alt="Card image cap">
      <div class="card-header">
        <h4 class="card-title">Card title</h4>
      </div>
      <div class="card-block">
        <p>This is a longer card with supporting text below as a natural lead-in to additional content.</p>
        <p><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-header">
        <h4 class="card-title">Card title</h4>
      </div>
      <div class="card-block">
        <p>This card has supporting text below as a natural lead-in to additional content.</p>
        <p><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-header">
        <h4 class="card-title">Card title</h4>
      </div>
      <div class="card-block">
        <p>This is a wider card with supporting text below as a natural lead-in to additional content.</p>
        <p><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
  </div>
</div>

Columns

Cards can be organized into Masonry-like columns with just CSS by wrapping them in .card-columns. Cards are ordered from top to bottom and left to right when wrapped in .card-columns. This is not available in -IE9.

Only applies to small devices and above.

Card image cap

Card title that wraps to a new line

This is a longer card with supporting text below as a natural lead-in to additional content.

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

This is a wider card with supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

<div class="card-columns">
  <div class="card">
    <img class="card-img-top img-fluid" src="..." alt="Card image cap">
    <div class="card-header">
      <h4 class="card-title">Card title that wraps to a new line</h4>
    </div>
    <div class="card-block">
      <p>This is a longer card with supporting text below as a natural lead-in to additional content.</p>
    </div>
  </div>
  <div class="card card-block">
    <blockquote class="card-blockquote">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <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 img-fluid" src="..." alt="Card image cap">
    <div class="card-header">
      <h4 class="card-title">Card title</h4>
    </div>
    <div class="card-block">
      <p>This card has supporting text below as a natural lead-in to additional content.</p>
      <p><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card card-block card-inverse card-primary text-xs-center">
    <blockquote class="card-blockquote">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
      <footer>
        <small>
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card text-xs-center">
    <div class="card-header">
      <h4 class="card-title">Card title</h4>
    </div>
    <div class="card-block">
      <p>This card has supporting text below as a natural lead-in to additional content.</p>
      <p><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img img-fluid" src="..." alt="Card image">
  </div>
  <div class="card card-block text-xs-right">
    <blockquote class="card-blockquote">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer>
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card card-block">
    <h4 class="card-title">Card title</h4>
    <p>This is a wider card with supporting text below as a natural lead-in to additional content.</p>
    <p><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
</div>