Bootstrap 5 Cards Body is used to create the card’s body is the main part of the card which contains the title, sub-title all the things that a card contains.
Bootstrap 5 Cards Body Class:
- card-body: This class is used for creating the body of the card.
Syntax:
<div class="card">
<div class="card-body">
...
</div>
</div>Example 1: In this example, we will add a title and text to the card body.
HTML
<!DOCTYPE html> <html>
<head>
<!-- Bootstrap CDN -->
<link href=
rel="stylesheet" integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body class="m-2">
<div>
<h1 class="text-success">
GeeksforGeeks
</h1>
<h2>Bootstrap 5 Cards Body</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>
</div>
</div>
</body>
</html>
|
Output:
Example 2: In this example, we will add a title, button, link, and text to the card body.
HTML
<!DOCTYPE html> <html>
<head>
<!-- Bootstrap CDN -->
<link href=
rel="stylesheet" integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body class="m-2">
<div>
<h1 class="text-success">
GeeksforGeeks
</h1>
<h2>Bootstrap 5 Cards Body</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>
<button class="btn btn-success">
GeeksforGeeks Button
</button>
<br>
<a href="#">GFG Links</a>
</div>
</div>
</div>
</body>
</html>
|
Output:
References: https://getbootstrap.com/docs/5.0/components/card/#body