Bootstrap 5 | Card

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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    Output:

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

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    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:



    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    Output:

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

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    Output:

  • Example of image in the buttom:
    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    Ouput:

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

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    Output:

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

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <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>

    chevron_right

    
    

    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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <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>

    chevron_right

    
    

    Output:

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

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <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>

    chevron_right

    
    

    Output:

  • Another example in pills form:
    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <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>

    chevron_right

    
    

    Output:




  • My Personal Notes arrow_drop_up

    Check out this Author's contributed articles.

    If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

    Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


    Article Tags :

    Be the First to upvote.


    Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.