Related Articles

Related Articles

Bootstrap 5 | Card
  • Last Updated : 31 Jul, 2020

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
    Recommended Articles
    Page :