Cards

1. Home
2. UI Kit
3. Cards

Content types

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.

Sizing

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

Text alignment

You can quickly change the text alignment of any card—in its entirety or specific parts—with our text align classes.

Header and footer

Add an optional header and/or footer within a card.

Header nav

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

Image caps

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

Background variants

Cards include their own variant classes for quickly changing the background-colorand border-colorof a card. Darker colors require the use of .card-inverse.

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-colorof a card.

Groups

Use card groups to render cards as a single, attached element with equal width and height columns.

Decks

Need a set of equal width and height cards that aren’t attached to one another? Use card decks. Only applies to small devices and above.

Columns

Cards can be organized into Masonry-like columns with just CSS by wrapping them in .card-columns. Only applies to small devices and above.