Bootstrap 4 cards is a bordered box with some padding around its content. It provides a flexible and extensible content container with various variants and options. Bootstrap 4 cards include options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.
Basic Card:
The .card class is used to create a basic card. Also, for placing content inside a class, you have to use the .card-body class. Below is an example of a basic card:
Header and Footer within Cards:
You can also add a header and footer within a card. By using .card-header class, you can put the header of the card and by using .card-footer, add footer of the class.
Card Titles, Text, and Links:
By using .card-title class, you can add card titles to any heading element. The .card-text class is used to remove the bottom margins for an <p> element if it is the last child in the card. And .card-link class is used to add a link to a card if it is required.
Contextual Classes:
Use contextual classes (.bg-primary, .bg-success, .bg-warning, etc.) to change the background color of card.
Card Images:
The classes .card-img-top or .card-img-bottom to a <img> tag is used to put an image to the top side or bottom side of the card as shown in the below example:
Card Image Overlays:
Make an image into a card background, use class .card-img-overlay to add text on top of the image.
Card Group:
Use .card-group class to create equal height and width card grid and removing the left and right margins between the cards.
List groups:
Use .list-group and .list-group-flush classes to create a list of contents in a card.
Kitchen sink:
This card type consists of everything in it, it mixes and matches multiple contents to make the desired card.
Nav Tab:
Apply the .card-header-tabs class to the <ul> element.
Nav Pill:
Apply the .card-header-pills class to the <ul> element.