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.
<!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.
<!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