A **card** is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.
If you're familiar with Bootstrap 3, cards replace our old panels, wells, and thumbnails. Similar functionality to those components is available as modifier classes for cards.
## Contents
* Will be replaced with the ToC, excluding the "Contents" header
{:toc}
## Example
Cards require a small amount of markup and classes to provide you with as much control as possible. These classes and markup are flexible though and can typically be remixed and extended with ease. For example, if your card has no flush content like images, feel free to put the `.card-block` class on the `.card` element to consolidate your markup.
Cards support a wide variety of content, including images, text, list groups, links, and more. Mix and match multiple content types to create the card you need.
You can quickly change the text alignment of any card—in its entirety or specific parts—with our [text align classes]({{ site.baseurl }}/components/utilities/#text-alignment).
{% example html %}
<divclass="card card-block">
<h4class="card-title">Special title treatment</h4>
<pclass="card-text">With supporting text below as a natural lead-in to additional content.</p>
<pclass="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<pclass="card-text"><smallclass="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<divclass="card">
<divclass="card-block">
<h4class="card-title">Card title</h4>
<pclass="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<pclass="card-text"><smallclass="text-muted">Last updated 3 mins ago</small></p>
<pclass="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<pclass="card-text"><smallclass="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
{% endexample %}
## Inverted text
Cards include a class for quickly toggling **the text color**. 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.
You can also use `.card-inverse` with the [contextual backgrounds variants](#background-variants).
Cards include their own variant classes for quickly changing the `background-color` and `border-color` of a card. **Darker colors require the use of `.card-inverse`.**
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <citetitle="Source Title">Source Title</cite></footer>
</blockquote>
</div>
</div>
{% endexample %}
## 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.
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <citetitle="Source Title">Source Title</cite></footer>
</blockquote>
</div>
</div>
{% endexample %}
## 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. However, enabling [flexbox mode]({{ site.baseurl }}/getting-started/flexbox) can switch that to use `display: flex;` and provide the same effect.
<pclass="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<pclass="card-text"><smallclass="text-muted">Last updated 3 mins ago</small></p>
<pclass="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<pclass="card-text"><smallclass="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
{% endexample %}
## Decks
Need a set of equal width and height cards that aren't attached to one another? Use 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.
**ProTip!** If you enable [flexbox mode]({{ site.baseurl }}/getting-started/flexbox/), you can remove the `.card-deck-wrapper`.
<pclass="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<pclass="card-text"><smallclass="text-muted">Last updated 3 mins ago</small></p>
<pclass="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<pclass="card-text"><smallclass="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
{% endexample %}
## Columns
Cards can be organized into [Masonry](http://masonry.desandro.com)-like columns with just CSS by wrapping them in `.card-columns`. Only applies to small devices and above.
**Heads up!** This is **not available in IE9 and below** as they have no support for the [`column-*` CSS properties](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts).
<h4class="card-title">Card title that wraps to a new line</h4>
<pclass="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
<divclass="card card-block">
<blockquoteclass="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>
<smallclass="text-muted">
Someone famous in <citetitle="Source Title">Source Title</cite>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>
<smallclass="text-muted">
Someone famous in <citetitle="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<divclass="card card-block">
<h4class="card-title">Card title</h4>
<pclass="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<pclass="card-text"><smallclass="text-muted">Last updated 3 mins ago</small></p>
