Bootstrap 5 Cards Body
Last Updated :
09 Dec, 2022
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 >
< 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 >
< 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
Share your thoughts in the comments
Please Login to comment...