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

Cards with horizontal image.

Overlap Image Cards

Weekly weather cards.

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

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.

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.