Open In App

Bootstrap 5 Cards Kitchen sink

Improve
Improve
Like Article
Like
Save
Share
Report

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.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <!-- Load Bootstrap -->
    <link href=
        rel="stylesheet" integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous">    
</head>
  
<body class="m-2">
    <div>
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
        <h2> Cards Kitchen sink</h2>
          
        <div class="card" style="width:18rem;">
            <img src=
                class="card-img-top" >
            <div class="card-body">
                <h5 class="card-title">Java</h5>
                <p class="card-text">
                    Java is Object Oriented. However,
                    it is not considered as pure 
                    object-oriented as it provides 
                    support for primitive data types
                    (like int, char, etc) 
                </p>
            </div>
            <ul class="list-group list-group-flush">
                <li class="list-group-item">Stack</li>
                <li class="list-group-item">Queue</li>
                <li class="list-group-item">Linked List</li>
            </ul>
            <div class="card-body">
                <a href="#" class="card-link">I am a link</a>           
            </div>
        </div>
    </div>
</body>
  
</html>


Output:

 

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

HTML




<!DOCTYPE html>
<html>
  
<head>
     <!-- Load Bootstrap -->
    <link href=
        rel="stylesheet" integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous">   
</head>
  
<body class="m-2">
    <div>
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
        <h3> Cards Kitchen sink</h3>
          
        <div class="card" style="width:18rem;">
            <img src=
                class="card-img-top">
                <div class="card-body">
                    <h5 class="card-title">Java</h5>
                    <p class="card-text">
                        Java is Object Oriented. However, 
                        it is not considered as pure 
                        object-oriented    as it provides 
                        support for primitive
                        data types (like int, char, etc) 
                    </p>
                </div>
                <ul class="list-group list-group-flush">
                    <li class="list-group-item">
                        Polymorphism</li>
                    <li class="list-group-item">
                        Encapsulation</li>
                    <li class="list-group-item">
                        Data Abstraction </li>
                </ul>
                <div class="card-body">
                    <a href="#" class="card-link">'
                        I am a link
                    </a>           
                </div>
                <div class="card-footer">
                    <button class="btn btn-success">
                        Geek Button
                    </button>
                </div>
            </div>
        </div>
    </div>
</body>
</html>


Output:

 

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



Last Updated : 07 Dec, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads