Bootstrap 5 is the latest major release by Bootstrap in which they have revamped the UI and made various changes. The card is a component provided by Bootstrap 5 which provides a flexible and extensible content container with multiple variants and options. It includes options for headers and footers. Cards support a wide variety of content, including images, text, list groups, links, and more.

Syntax: 

<div class="card"> Card Content ... <div>

• Basic Card:The basic building block of a card is the card-body and with card class as parent we can create a basic card. 
  Example: 

Output: 

• Header and Footer: The card-header provides header to the cards and card-footer provides footer to the cards as given below. 
  Example: 

Output: 

• Title and Links: The card-title is used to give a title to the card and card-link is used to provide link to the card if required in it. 
  Example: 

Output: 

• Images: The images to the card are inserted with card-img-top and with card-img-bottom with the help of these two and img tag is used with it to add the image. 
  Example: 

Output: 

• Example of image in the buttom: 
  Example: 

Output: 

• Image Overlays: In this we have to use an extra class called the card-img-overlay in the same line of code which you have used for card images. This turns an image into a card background and overlays the card’s text. 
  Example: 

Output: 

• Card Groups: Use card groups to render cards as a single, attached element with equal width and height columns. 
  Example: 

Output: 

• List groups: It creates a list of content in a card. 
  Example: 

OUTPUT: 

• Kitchen sink: It is name given to the type of card which consist everything thing in it, it’s a mix and match of multiple content to make your desired card 
  Example: 

Output: 

• Navigation: It adds navigation bar to the cards. 
  Example: 

Output: 

• Another example in pills form: 
  Example: 

Output: