Cards

Cards can be used as a flexible type of container.

Basic Usage

Cards can be used as containers. There are several other components that can be used as the content of cards. Most of the time your main content should be in a CardBody.

There are also CardHeader and CardFooter components that can be used as a header and as a footer respectively. Use them only as the first child or as the last child of a card respectively.

The CardImg component can be used to embed images into cards. You can pass it most properties that the img component supports including src, alt, width andheight. It also supportstop andbottom properties that set border-radius of the theme correctly.

Color

Cards come in different colors. Most of the time the default color should be used unless the card is very important and the color communicates the cards intent.

There are the following colors to choose from:

Outline

Inverse

The inverse property can be used to adjust the text color when the card color is dark. It is recommended to use inverse when usingcolor="primary",color="dark" orcolor="danger".

Cards in a Grid

Cards are a perfect candidate for structuring data on the screen. An easy way to layout cards is to use a container with a row and a column for each individual cards. Using the properties of Col the size of the card can be adjusted. As cards by themselves do not have any margin it is often helpful to add an additional m-1 or m-2 CSS class to each card to create some spacing between the cards.

Cards in Columns

The CardColumns component provides you with another neat way to layout a collection of cards in separate columns. Because this component uses the css grid there are rendering issues on some browsers with the box-shadow that cards might have in certain themes. A workaround might be to decrease the column-gap to zero and use padding instead. As a result of this issue it is currently not recommended to use the CardColumns component.

Card