Bootstrap Cards

In bootstrap, the card is a flexible content container box to hold a wide variety of other bootstrap components. The bootstrap card has included the options for headers, footers, background colors, content, etc., for better display.

The card component has been introduced in bootstrap 4, and it replaces the old panels, wells, and thumbnails components in bootstrap 3.

Bootstrap Create Card

In bootstrap, you can create a card by adding .card class to <div> element and wrap the card content inside of <div> element with .card-body class like as shown below.

The above example will return the result as shown below.

Bootstrap Card with Titles, Text, and Links

By adding .card-title or .card-subtitle class to any heading (<h*>) element, you can create card title and subtitle in the bootstrap card. To remove the bottom margin for the text, you can add .card-text class to the required elements.

Same way, you can add the links to a bootstrap card by adding .card-link to <a> element. The .card-link will place the links next to each other.

The above example will return the result as shown below.

Bootstrap Card with Headers and Footers

By using .card-header and .card-footer classes, you can create the header and footer for the card in bootstrap.

The above example will return the result as shown below.

Bootstrap Customize Card Style

In bootstrap, by using text and background contextual classes (.bg-primary, .bg-secondary, .bg-successEtc.) we can customize the style of cards based on our requirements.

The above example will return the result as shown below.

Same way, we can customize the border color of cards using border utility classes such as .border-primary, .border-secondaryEtc. based on our requirements.

The above example will return the result as shown below.

Bootstrap Card with Images

In bootstrap, you can add the images at the top or bottom of the card by adding .card-img-top or .card-img-bottom to <img> element. The .card-img-top class will place the image at the top of the card and .card-img-bottom class will place an image at the bottom of the card in bootstrap.

If you observe the above example, we added the image outside .card-body to span the entire width of the card. The above example will return the result as shown below.

Bootstrap Card Image Overlays

By replacing .card-body class with .card-img-overlay, you can turn the image into a card background and overlay your card text.

The above example will return the result as shown below.

Bootstrap Horizontal Cards

In bootstrap, we can create the responsive and mobile friendly horizontal card by placing the image and card content side by side using grid and utility classes.

The above example will return the result as shown below.

Bootstrap Card Groups

In bootstrap, the .card-group class is useful to arrange a series of cards as single, attached elements with equal width and height columns.

If you observe the above example, we are using card groups with footers so that the content will line up automatically. The above example will return the result as shown below.

If you observe the above result, the .card-group class has rendered the cards as a single, attached element with equal width and columns.

Bootstrap Card Decks

In bootstrap, the .card-deck class is useful to render the cards as separate with equal width and height.

The above example will return the result as shown below.

If you observe the above result, the .card-deck class rendered the cards with equal width and height, and those are not attached to one another.

Bootstrap Card Columns

In bootstrap, the .card-columns class is useful to create the masonry like a grid of cards, and it will automatically adjust the cards based on the layout.

The above example will return the result as shown below.

This is how we can use the cards in our bootstrap applications to create a flexible content container box to hold a wide variety of other components based on our requirements.