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

Cras justo odio
Dapibus ac facilisis in
Vestibulum at eros

Card link Another link

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

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 titles are used by adding .card-title to a <h*> tag. In the same way, links are added and placed next to each other by adding .card-link to a <a> tag.

Card title

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

Card link Another link

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

Subtitles are used by adding a .card-subtitle to an <h*> tag. If the .card-title and the .card-subtitle items are placed in a .card-block item, the card title and subtitle are aligned nicely.

Card title

Support card subtitle

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

Card link Another link

<div class="card">
  <div class="card-header">
    <h4 class="card-title">Card title</h4>
    <h6 class="card-subtitle text-muted">Support card subtitle</h6>
  </div>
  <img src="..." alt="Card image">
  <div class="card-block">
    <p>Some quick example text to build on the card's content.</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </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>

Sizing

Constrain the width of cards via custom CSS, our predefined grid classes, or with custom styles using our grid mixins.

Special title treatment

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

Go somewhere

Special title treatment

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

Go somewhere

<div class="row">
  <div class="col-sm-6">
    <div class="card">
      <div class="card-header"><h3 class="card-title">Special title treatment</h3></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>
  </div>
  <div class="col-sm-6">
    <div class="card">
      <div class="card-header"><h3 class="card-title">Special title treatment</h3></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>
  </div>
</div>

Using custom widths:

Special title treatment

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

Go somewhere

<div class="card" style="width: 25rem;">
  <div class="card-header"><h3 class="card-title">Special title treatment</h3></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>

Text alignment

You can quickly change the text alignment of any card with our text align classes.

Special title treatment

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

Go somewhere

Special title treatment

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

Go somewhere

Special title treatment

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

Go somewhere

<div class="card">
  <div class="card-header"><h4 class="card-title">Special title treatment</h4></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>

<div class="card text-xs-center">
  <div class="card-header"><h4 class="card-title">Special title treatment</h4></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>

<div class="card text-xs-right">
  <div class="card-header"><h4 class="card-title">Special title treatment</h4></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>

Close option

Title card

esc

Ut vestibulum felis vitae dolor bibendum mollis. Integer laoreet dictum mi vel viverra. Integer nec augue eget mi euismod malesuada ac sit amet neque.

Go somewhere

<div class="card">
  <div class="card-header">
    <h2 class="card-title">Title card</h2>
    <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>Ut vestibulum felis vitae dolor bibendum mollis. Integer laoreet dictum mi vel viverra. Integer nec augue eget mi euismod malesuada ac sit amet neque.</p>
    <form>
      <div class="form-group">
        <label for="exampleInput1">Example label</label>
        <input type="email" class="form-control" id="exampleInput1" aria-describedby="exampleInput" placeholder="Example" autofocus />
        <small id="exampleInput" class="form-text text-muted">Maecenas nisi lectus, lacinia eget pretium sed.</small>
      </div>
      <div class="form-group">
        <label for="exampleInput2">Example label</label>
        <input type="email" class="form-control" id="exampleInput2" aria-describedby="exampleInput" placeholder="Example" />
        <small id="exampleInput" class="form-text text-muted">Maecenas nisi lectus, lacinia eget pretium sed.</small>
      </div>
    </form>
  </div>
  <div class="card-footer">
    <a href="javascript:;" class="btn btn-primary btn-lg btn-block">Go somewhere</a>
  </div>
</div>

Header and footer

Featured

Special title treatment

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

Go somewhere

<div class="card">
  <div class="card-header">
    Featured
  </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>

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

Featured

Special title treatment

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

Go somewhere

<div class="card">
  <div class="card-header">
    Featured
    <h4 class="card-title mt-1">Special title treatment</h4>
  </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>

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-block">
    <blockquote class="card-blockquote">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>

Featured

Special title treatment

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

Go somewhere

2 days ago

<div class="card text-xs-center">
  <div class="card-header">
    Featured
    <h4 class="card-title mt-1">Special title treatment</h4>
  </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 class="card-footer text-muted">
    2 days ago
  </div>
</div>

Use Bootstrap’s nav pills or tabs within a card header. Be sure to always include a .float-*-* utility class for proper alignment.

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">
    <ul class="nav nav-tabs nav-underline card-header-tabs float-xs-right">
      <li class="nav-item">
        <a class="nav-link active" data-toggle="tab" href="#tab1">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#tab2">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" data-toggle="tab" href="#tab3">Disabled</a>
      </li>
    </ul>
    <h4 class="card-title">Special title treatment</h4>
  </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>

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">
    <ul class="nav nav-tabs nav-underline card-header-tabs flex-xs flex-xs-center">
      <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-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>

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 title

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

Last updated 3 mins ago

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>
<div class="card">
  <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>
  <img class="card-img-bottom" src="..." alt="Card image cap">
</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.

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

Inverted text

By default, cards use dark text and assume a light background. Add .card-inverse for white text and specify the background-color and border-color to go with it.

Special title treatment

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

Go somewhere

<div class="card card-inverse" style="background-color: #333; border-color: #333;">
<div class="card-header">
  <h3 class="card-title">Special title treatment</h3>
</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>

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.

Someone famous in Source Title

<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>
      <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </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.

Someone famous in Source Title

<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>
      <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </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 title

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

Last updated 3 mins ago

Card title

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

Last updated 3 mins ago

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 title

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

Last updated 3 mins ago

Card title

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

Last updated 3 mins ago

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

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>

Cards

Powerful display options

Card title

Content types

Card title

Card title

Card title

Support card subtitle

Card block style

Card title

Sizing

Special title treatment

Special title treatment

Special title treatment

Text alignment

Special title treatment

Special title treatment

Special title treatment

Close option

Title card

Header and footer

Special title treatment

Special title treatment

Special title treatment

Header nav

Special title treatment

Special title treatment

Header with dropdown options

Special title treatment

Header with close

Special title treatment

Image caps

Card title

Card title

Image overlays

I love cats!

Inverted text

Special title treatment

Background variants

Outline variants

Groups

Card title

Card title

Card title

Decks

Card title

Card title

Card title

Columns

Card title that wraps to a new line

Card title

Card title

Card title