.card to create a card, with an optional
.card-body to create a padded section within a card.
Padding and margin utilities can also be used to control the layout of elements within a card.
By default, cards have no fixed width and will fill the full width of their parent element.
Rows, columns, sizing utilities and custom CSS can be used to control their layout if required. The following example demonstrates a simple two-column layout:
You can quickly change the text alignment of any card and its contents using text align utilities.
Cards support a wide variety of content, including images, text, list groups, links, and more.
Use position utilities to overlay your card content on a background image.
Create lists of content in a card with a flush list group.
Combine multiple content types to create the card you need. The following example includes image styles, blocks, text styles, and a list group:
Using a combination of rows, columns and utility classes, cards can be made horizontal in a mobile-friendly and responsive way.
The following example uses
.row-flush to remove column gutters and
.md:col-* column classes to make the card horizontal at the
.column-count-* to display cards in columns.