Bootstrap 5 Cards Body
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 = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" > </ head > < body class = "m-2" > < div > < h1 class = "text-success" > w3wiki </ h1 > < h2 >Bootstrap 5 Cards Body</ h2 > < div class = "card" style = "width:18rem;" > < img src = "https://media.w3wiki.net/wp-content/cdn-uploads/Java.png" 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 = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" > </ head > < body class = "m-2" > < div > < h1 class = "text-success" > w3wiki </ h1 > < h2 >Bootstrap 5 Cards Body</ h2 > < div class = "card" style = "width:18rem;" > < img src = "https://media.w3wiki.net/wp-content/cdn-uploads/Java.png" 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" > w3wiki Button </ button > < br > < a href = "#" >GFG Links</ a > </ div > </ div > </ div > </ body > </ html > |
Output:
References: https://getbootstrap.com/docs/5.0/components/card/#body
Contact Us