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">
            GeeksforGeeks
        </h1>
        <h2>Bootstrap 5 Cards Body</h2>
        
        <div class="card" style="width:18rem;">
            <img src=
"https://media.geeksforgeeks.org/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">
            GeeksforGeeks
        </h1>
        <h2>Bootstrap 5 Cards Body</h2>
        
        <div class="card" style="width:18rem;">
            <img src=
"https://media.geeksforgeeks.org/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">
                        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

Explore