Bootstrap 5 Cards Kitchen sink

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.

The kitchen sink is the total mix and match of many content types or throwing everything in there to create a card you need.

Bootstrap 5 cards kitchen sink classes: No special classes are used in the kitchen sink. You can customize the component using Cards Titles, text, links, and list groups classes.

• card-link: This class is used for adding links in the card

 

Syntax:

<div class="card" >
 ...
 <div class="card-body">
 <a href="#" class="card-link">...</a> 
 ...
 </div>
</div>

Example 1: In this example, we will show images, blocks, text styles, and a list group all wrapped in a fixed-width card.

Output:

👁 Image

Example 2: In this example, we will add a button in the footer of the kitchen sink.

Output:

👁 Image

References: https://getbootstrap.com/docs/5.0/components/card/#kitchen-sink