Basic Examples

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-body class on the .card element to consolidate your markup.

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.

Image caps, overlays & Inverted text

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

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

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

Cards include a class for quickly toggling the text color. By default, cards use dark text and assume a light background. Add .text-white for white text and specify the background-color and border-color to go with it.
You can also use .text-white with the contextual backgrounds variants.

Outline variants

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

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 can switch that to use display: flex; and provide the same effect.

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.

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.

Heads up! This is not available in IE9 and below as they have no support for the column-* CSS properties.