Below is an example of a basic card with mixed content and a fixed width.
Card titles are used by adding
.card-title to a
<h*> tag. In the same way, links are added and placed next to each other by adding
.card-link to an tag.
Subtitles are used by adding a
.card-subtitle to a
Add an optional header within a card. By default
.card-header is set to
display: flex; and
justify-content: space-between; and
The building block of a card is the
.card-body. Use it whenever you need a padded section within a card.
Add an optional footer within a card.
Cards include a few options for working with images. Choose from appending "image caps" at either end of a card, overlaying images with card content, or simply embedding the image in a card.
Similar to headers and footers, cards can include top and bottom “image caps”—images at the top or bottom of a card.
Turn an image into a card background and overlay your card’s text. Depending on the image, you may or may not need additional styles or utilities.
Heads up! Note that content should not be larger than the height of the image. If content is larger than the image the content will be displayed outside the image.
Using a combination of grid and utility classes, cards can be made horizontal in a mobile-friendly and responsive way. In the example below, we remove the grid gutters with
.no-gutters and use
.col-md-* classes to make the card horizontal at the
md breakpoint. Further adjustments may be needed depending on your card content.
In addition to styling the content within cards, Bootstrap includes a few options for laying out series of cards. For the time being, these layout options are not yet responsive.
Use card groups to render cards as a single, attached element with equal width and height columns. Card groups start off stacked and use
display: flex; to become attached with uniform dimensions starting at the
When using card groups with footers, their content will automatically line up.