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.
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.
Use contextual classes (.bg-primary, .bg-success, .bg-warning, etc.) to change the background color of card.
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.
Use .card-group class to create equal height and width card grid and removing the left and right margins between the cards.
Use .list-group and .list-group-flush classes to create a list of contents in a card.
This card type consists of everything in it, it mixes and matches multiple contents to make the desired card.
Apply the .card-header-tabs class to the <ul> element.
Apply the .card-header-pills class to the <ul> element.