Skip to content
Related Articles

Related Articles

Improve Article
Bootstrap 5 | Card
  • Last Updated : 20 May, 2021

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 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 header to the cards and card-footer provides 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 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 image in the buttom: 
    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
                              fron-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 name given to the type of card which consist everything thing in it, it’s a mix and match of multiple content to make your desired 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 class="card-body">
                        <a href="" class="class-link">
                          Cart</a>
                        <a href="" class="class-link">
                          Add Item</a>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

Output: 

  • Navigation: It adds 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: 

 

My Personal Notes arrow_drop_up
Recommended Articles
Page :