Open In App

Bootstrap 5 | Card

Improve
Improve
Like Article
Like
Save
Share
Report

Bootstrap 5 is the latest major release by Bootstrap in which they have revamped the UI and made various changes. 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.

Syntax: 

<div class="card"> Card Content ... <div>
  • Basic Card: The basic building block of a card is the card-body and with card class as a parent we can create a basic card. 

Example:

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Card</title>
    <meta charset="utf-8">
    <meta name="viewport"
    content="width=device-width,initial-scale=1">
    <!-- Load Bootstrap -->
    <link rel="stylesheet" href=
        integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
        crossorigin="anonymous">
    <script src=
        integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous">
    </script>
    <script src=
        integrity=
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
        crossorigin="anonymous">
    </script>
</head>
<body style="text-align: center;">
    <div class="container mt-3">
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <div class="container mt-3" style="width: 600px;">
            <div class="card">
                <div class="card-body">
                    A computer science portal for geeks
                </div>
            </div>
        </div>
    </div>
</body>
</html>


Output: 

  • Header and Footer: The card-header provides a header to the cards and card-footer provides a footer to the cards as given below. 

Example:

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Card</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <!-- Load Bootstrap -->
    <link rel="stylesheet" href=
        integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
        crossorigin="anonymous">
    <script src=
        integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous">
    </script>
    <script src=
        integrity=
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
        crossorigin="anonymous">
    </script>
</head>
<body style="text-align: center;">
    <div class="container mt-3">
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <div class="container mt-3" style="width: 600px;">
            <div class="card">
                <div class="card-header">Header</div>
                <div class="card-body">Content</div>
                <div class="card-footer">Footer</div>
            </div>
        </div>
    </div>
</body>
</html>


Output: 

  • Title and Links: The card-title is used to give a title to the card and card-link is used to provide a link to the card if required in it. 

Example:

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Card</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <!-- Load Bootstrap -->
    <link rel="stylesheet" href=
        integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
        crossorigin="anonymous">
    <script src=
        integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous">
    </script>
    <script src=
        integrity=
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
        crossorigin="anonymous">
    </script>
</head>
<body style="text-align: center;">
    <div class="container mt-3">
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <div class="container mt-3" style="width: 600px;">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">
                        Card title</h4>
                    <p class="card-text">
                        Some example text.
                        Some example text.</p>
 
                    <a href="#" class="card-link">
                        Card link</a>
                    <a href="#" class="card-link">
                        Another link</a>
                </div>
            </div>
        </div>
    </div>
</body>
</html>


Output: 

  • Images: The images to the card are inserted with card-img-top and with card-img-bottom with the help of these two and img tag is used with it to add the image. 

Example:

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Card</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <!-- Load Bootstrap -->
    <link rel="stylesheet" href=
        integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
        crossorigin="anonymous">
    <script src=
        integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous">
    </script>
    <script src=
        integrity=
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
        crossorigin="anonymous">
    </script>
</head>
<body style="text-align: center;">
    <div class="container mt-3">
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <div class="container mt-3" style="width: 600px;">
            <div class="card">
                <img class="card-img-top"
                    src=
                    alt="Card image" style="width: 100%;">
                <div class="card-body">
                    <h4 class="card-title">Developer Guy</h4>
                    <p class="card-text">Developer Guy love to
                        develope front-end and back-end
                    </p>
 
                    <a href="#" class="btn btn-primary">
                        See Profile
                    </a>
                </div>
            </div>
        </div>
    </div>
</body>
</html>


Output: 

  • Example of the image in the button: 

Example:

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Card</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width,initial-scale=1">
    <!-- Load Bootstrap -->
    <link rel="stylesheet" href=
        integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
        crossorigin="anonymous">
    <script src=
        integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous">
    </script>
    <script src=
        integrity=
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
        crossorigin="anonymous">
    </script>
</head>
<body style="text-align: center;">
    <div class="container mt-3">
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <div class="container mt-3" style="width: 600px;">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">Developer Guy</h4>
                    <p class="card-text">Developer Guy love to
                        develope front-end and back-end
                    </p>
 
                    <a href="#" class="btn btn-primary">
                        See Profile
                    </a>
                </div>
                <img class="card-img-bottom" src=
                    alt="Card image" style="width: 100%;">
            </div>
        </div>
    </div>
</body>
</html>


Output: 

  • Image Overlays: In this, we have to use an extra class called the card-img-overlay in the same line of code which you have used for card images. This turns an image into a card background and overlays the card’s text. 

Example:

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Card</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <!-- Load Bootstrap -->
    <link rel="stylesheet" href=
        integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
        crossorigin="anonymous">
    <script src=
        integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous">
    </script>
    <script src=
        integrity=
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
        crossorigin="anonymous">
    </script>
</head>
<body style="text-align: center;">
    <div class="container mt-3">
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <div class="container mt-3" style="width: 600px;">
            <div class="card" style="width: 400px;">
                <img class="card-img-bottom"
                    src=
                    alt="Card image" style="width: 100%;">
                <div class="card-img-overlay">
                    <div class="card-body">
                        <h4 class="card-title">
                            Developer Guy
                        </h4>
                        <p class="card-text" style="color: red;">
                            Developer Guy love to develope
                            front-end and back-end
                        </p>
 
                        <a href="#" class="btn btn-primary">
                            See Profile
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>


Output: 

  • Card Groups: Use card groups to render cards as a single, attached element with equal width and height columns. 

Example:

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Card</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <!-- Load Bootstrap -->
    <link rel="stylesheet" href=
        integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
        crossorigin="anonymous">
    <script src=
        integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous">
    </script>
    <script src=
        integrity=
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
        crossorigin="anonymous">
    </script>
</head>
<body style="text-align: center;">
    <div class="container mt-3">
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <div class="container mt-3" style="width: 600px;">
            <div class="card-group">
                <div class="card" style="width: 200px;">
                    <div class="card-body">
                        <h4 class="card-title">
                            Developer Guy I
                        </h4>
                        <p class="card-text">
                            Developer Guy love to develop
                            front-end and back-end
                        </p>
 
                        <a href="#" class="btn btn-primary">
                            See Profile
                        </a>
                    </div>
                    <img class="card-img-bottom" src=
                        alt="Card image" style="width: 100%;">
                </div>
                <div class="card" style="width: 200px;">
                    <div class="card-body">
                        <h4 class="card-title">
                            Developer Guy II
                        </h4>
                        <p class="card-text">
                            Developer Guy love to develop
                            android apps
                        </p>
 
                        <a href="#" class="btn btn-primary">
                            See Profile
                        </a>
                    </div>
                    <img class="card-img-bottom" src=
                        alt="Card image" style="width: 100%;">
                </div>
                <div class="card" style="width: 200px;">
                    <div class="card-body">
                        <h4 class="card-title">
                            Developer Guy III
                        </h4>
                        <p class="card-text">
                            Developer Guy love to
                            develop machine learning models
                        </p>
 
                        <a href="#" class="btn btn-primary">
                            See Profile</a>
                    </div>
                    <img class="card-img-bottom" src=
                        alt="Card image" style="width: 100%;">
                </div>
            </div>
        </div>
    </div>
</body>
</html>


Output: 

  • List groups: It creates a list of content in a card. 

Example:

HTML




<html lang="en">
<head>
    <title>Bootstrap Card</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <!-- Load Bootstrap -->
    <link rel="stylesheet" href=
        integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
        crossorigin="anonymous">
    <script src=
        integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous">
    </script>
    <script src=
        integrity=
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
        crossorigin="anonymous">
    </script>
</head>
<body style="text-align: center;">
    <div class="container mt-3">
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <div class="container mt-3" style="width: 600px;">
            <div class="card">
                <ul class="list-group list-group-flush">
                    <li class="list-group-item">
                        Bootstrap
                    </li>
                    <li class="list-group-item">
                        HTML
                    </li>
                    <li class="list-group-item">
                        JavaScript
                    </li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>


Output: 

  • Kitchen sink: It is a name given to the type of card which consists of everything thing in it, it’s a mix and match of multiple contents to make your desired card 

Example:

Code block

Output: 

  • Navigation: It adds a navigation bar to the cards. 

Example:

HTML




<html lang="en">
<head>
    <title>Bootstrap Card</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <!-- Load Bootstrap -->
    <link rel="stylesheet" href=
        integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
        crossorigin="anonymous">
    <script src=
        integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous">
    </script>
    <script src=
        integrity=
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
        crossorigin="anonymous">
    </script>
</head>
<body style="text-align: center;">
    <div class="container mt-3">
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <div class="container mt-3" style="width: 600px;">
            <div class="card-text-center">
                <div class="card-header">
                    <ul class="nav nav-tabs card-header-tabs">
                        <li class="nav-item">
                            <a class="nav-link active" href="#">
                                Active
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                link
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link disabled" href="#">
                                Disabled
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="card-block">
                    <h4 class="card-title">Title</h4>
                    <p class="card-text">
                        This the th test area
                    </p>
 
                    <a href="#" btn-btn-primary>
                        Click me
                    </a>
                </div>
            </div>
        </div>
    </div>
</body>
</html>


Output: 

  • Another example in pills form: 

Example:

HTML




<html lang="en">
<head>
    <title>Bootstrap Card</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <!-- Load Bootstrap -->
    <link rel="stylesheet" href=
        integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
        crossorigin="anonymous">
    <script src=
        integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous">
    </script>
    <script src=
        integrity=
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
        crossorigin="anonymous">
    </script>
</head>
<body style="text-align: center;">
    <div class="container mt-3">
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <div class="container mt-3" style="width: 600px;">
            <div class="card-text-center">
                <div class="card-header">
                    <ul class="nav nav-pills card-header-tabs">
                        <li class="nav-item">
                            <a class="nav-link active" href="#">
                                Active
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                link
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link disabled" href="#">
                                Disabled
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="card-block">
                    <h4 class="card-title">Title</h4>
                    <p class="card-text">
                        This the th test area
                    </p>
 
                    <a href="#" btn-btn-primary>
                        Click me
                    </a>
                </div>
            </div>
        </div>
    </div>
</body>
</html>


Output: 

Text Alignment in Card:

We can easily change the text alignment of any card or a specific part of a card in Bootstrap using the Bootstrap text alignment classes of Bootstrap.

Here is a code example displaying the examples in which we have to change the alignment of a whole card or specific part of a card using the text-align classes.

Code:

and

Output:

Horizontal Card:

Using the grid class utility, we can create a card where the card image and card body are horizontally placed instead of being vertically placed using the grid utility classes. This feature is also mobile-friendly and also is useful for responsive websites.

Here is a code example in which we have created a sample card where the image and the card body text are horizontally placed.

Code:

HTML




<html lang="en">
<head>
    <title>Bootstrap Card</title>
    <meta charset="utf-8" >
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <!--  Bootstrap CSS -->
    <link rel="stylesheet" href=
        integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
        crossorigin="anonymous">
<!-- Bootstrap JS -->
    <script src=
        integrity=
    "sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous">
    </script>
    <script src=
        integrity=
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
        crossorigin="anonymous">
    </script>
</head>
<body>
    <div class="container mt-3">
        <h1 style="color: green; text-align: center;">
            GeeksforGeeks
        </h1>
    </div>
    <div class="card mb-2" style="max-width: 540px;">
        <div class="row g-0">
            <div class="col-md-6">
                <img src="gfg.jpg" class="img-fluid rounded-start"
                    alt="...">
            </div>
            <div class="col-md-6">
                <div class="card-body">
                    <h5 class="card-title">
                        Card title
                    </h5>
                    <p class="card-text">
                        The card body and the card image
                        is placed horizontally.
                    </p>
 
                </div>
            </div>
        </div>
    </div>
</body>
</html>


Output:

Changing the color of the Card:

We can change the color of the card using the background utility classes and the text-color classes in Bootstrap. 

Syntax:

<div class="card text-white bg-primary"></div>

Code:

HTML




<html lang="en">
<head>
    <title>Bootstrap Card</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <!--  Bootstrap CSS -->
    <link rel="stylesheet" href=
        integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
        crossorigin="anonymous">
    <!-- Bootstrap JS -->
    <script src=
        integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous">
    </script>
    <script src=
        integrity=
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
        crossorigin="anonymous">
    </script>
</head>
<body>
    <div class="container mt-3">
        <h1 style="color: green; text-align: center;">
            GeeksforGeeks
        </h1>
    </div>
    <div class="card text-white bg-primary mb-3"
        style="max-width: 18rem;">
        <div class="card-header">
            This is the card header
        </div>
        <div class="card-body">
            <h5 class="card-title">
                This is card title
            </h5>
            <p class="card-text">
                This is the body of the card
                made using Bootstrap Classes.
            </p>
 
        </div>
    </div>
    <div class="card text-white bg-secondary mb-3"
        style="max-width: 18rem;">
        <div class="card-header">
            This is the card header
        </div>
        <div class="card-body">
            <h5 class="card-title">
                This is card title
            </h5>
            <p class="card-text">
                This is the body of the card
                made using Bootstrap Classes.
            </p>
 
        </div>
    </div>
    <div class="card text-white bg-success mb-3"
        style="max-width: 18rem;">
        <div class="card-header">
            This is the card header
        </div>
        <div class="card-body">
            <h5 class="card-title">
                This is card title
            </h5>
            <p class="card-text">
                This is the body of the card
                made using Bootstrap Classes.
            </p>
 
        </div>
    </div>
    <div class="card text-white bg-danger mb-3"
        style="max-width: 18rem;">
        <div class="card-header">
            This is the card header
        </div>
        <div class="card-body">
            <h5 class="card-title">
                This is card title
            </h5>
            <p class="card-text">
                This is the body of the card
                made using Bootstrap Classes.
            </p>
 
        </div>
    </div>
</body>
</html>


Output:


 Adding Borders to Cards:

We can add borders to the cards using the border-utilities classes present in the Bootstrap Framework like border-primary, border-success, border-danger, and many more. 

Syntax:

<div class="card border-primary"></div>

Full Code:

HTML




<html lang="en">
<head>
    <title>Bootstrap Card</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <!--  Bootstrap CSS -->
    <link rel="stylesheet" href=
        integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
        crossorigin="anonymous">
    <!-- Bootstrap JS -->
    <script src=
        integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous">
    </script>
    <script src=
        integrity=
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
        crossorigin="anonymous">
    </script>
</head>
 
<body>
    <div class="container mt-3">
        <h1 style="color: green; text-align: center;">
            GeeksforGeeks
        </h1>
    </div>
    <div class="card border-primary text-primary mb-3"
        style="max-width: 18rem;">
        <div class="card-header">
            This is the card header
        </div>
        <div class="card-body">
            <h5 class="card-title">
                This is card title
            </h5>
            <p class="card-text">
                This is the body of the card
                made using Bootstrap Classes.
            </p>
 
        </div>
    </div>
    <div class="card text-success border-success mb-3"
        style="max-width: 18rem;">
        <div class="card-header">
            This is the card header
        </div>
        <div class="card-body">
            <h5 class="card-title">
                This is card title
            </h5>
            <p class="card-text">
                This is the body of the card
                made using Bootstrap Classes.
            </p>
 
        </div>
    </div>
    <div class="card text-secondary border-secondary mb-3"
        style="max-width: 18rem;">
        <div class="card-header">
            This is the card header
        </div>
        <div class="card-body">
            <h5 class="card-title">
                This is card title
            </h5>
            <p class="card-text">
                This is the body of the card
                made using Bootstrap Classes.
            </p>
 
        </div>
    </div>
    <div class="card text-danger border-danger mb-3"
        style="max-width: 18rem;">
        <div class="card-header">
            This is the card header
        </div>
        <div class="card-body">
            <h5 class="card-title">
                This is card title
            </h5>
            <p class="card-text">
                This is the body of the card
                made using Bootstrap Classes.
            </p>
 
        </div>
    </div>
</body>
</html>


Output:

Supported Browsers:

  • Google Chrome
  • Mozilla Firefox
  • Safari
  • Brave Browsers
  • Opera


Last Updated : 19 May, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads