Bootstrap | Cards

A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.
It replaces the use panels, wells and thumbnails. As all of it can be used in a single container called card.

  • BASIC CARD :The building block of a card is the card-body and with 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">
        <link rel="stylesheet" 
        <script src=
        </script>
        <script src=
        </script>
        <script src=
        </script>
    </head>
    <body>
        <div class="container">
            <h2 style="color:green;">GeeksforGeeks</h2>
            <div class="card">
                <div class="card-body">A computer science portal for geeks
                </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.

    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">
    </head>
    <body
    <div class="container">
      <h1 style="color:green">GeeksforGeeks</h1>
      <div class="card">
        <div class="card-header">Header</div>
        <div class="card-body">Content</div
        <div class="card-footer">Footer</div>
      </div>
    </div>
    </body>
    </html>

    chevron_right

    
    

    Output:

  • CARD 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">
      <link rel="stylesheet"
      <script src=
      <script src=
      <script src=
    </head>
    <body
    <div class="container">
      <h1 style="color:green">GeeksforGeeks</h1>
      <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>
    </body>
    </html>

    chevron_right

    
    

    Output:

  • CARD 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 input 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">
      <link rel="stylesheet"
      <script src=
      <script src=
      <script src=
    </head>
    <body
       
    <div class="container">
      <h1 style="color:green">GeeksforGeeks</h1>
      <div class="card" style="width:200px">
        <img class="card-img-top" src="https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190530183756/Good-Habits-for-developers-programmers.png" 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 fron-end and back-end </p>
          <a href="#" class="btn btn-primary">See Profile</a>
        </div>
      </div>
    </div>
      
    </body>
    </html>

    chevron_right

    
    

    Output:

  • EXAMPLE OF BOTTOM-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">
      <link rel="stylesheet"
      <script src=
      <script src=
      <script src=
    </head>
    <body
    <div class="container">
      <h1 style="color:green">GeeksforGeeks</h1>
      <div class="card" style="width:200px">
        <div class="card-body">
          <h4 class="card-title">Developer Guy</h4>
          <p class="card-text">Developer Guy love to develope fron-end and back-end </p>
          <a href="#" class="btn btn-primary">See Profile</a>
        </div>
        <img class="card-img-bottom" src="https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190530183756/Good-Habits-for-developers-programmers.png" alt="Card image" style="width:100%">
      </div>
    </div>
      
    </body>
    </html>

    chevron_right

    
    

    Output:

  • IMAGE OVERLAYS :In this we have to just use an extra class call the card-img-overlay in the same line of code which you have used for card images.
    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">
      <link rel="stylesheet"
      <script src=
      <script src=
      <script src=
    </head>
    <body
       
    <div class="container">
      <h1 style="color:green">GeeksforGeeks</h1>
      <div class="card" style="width:300px">
        <img class="card-img-bottom" src="https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190530183756/Good-Habits-for-developers-programmers.png" 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>
      
    </body>
    </html>

    chevron_right

    
    

    Ouput:

  • EXAMPLE FOR CARD-GROUP :
    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">
      <link rel="stylesheet"
      <script src=
      <script src=
      <script src=
    </head>
    <body
       
    <div class="container">
      <h1 style="color:green">GeeksforGeeks</h1>
      <div class="card-deck">
          <div class="card-text-white bg-primary">
              <div class="card-body">
                  <h4 class="card-title">PRIMARY</h4>
              </div>
          </div>
            
          <div class="card-text-white bg-success">
              <div class="card-body">
                  <h4 class="card-title">SUCCESS</h4>
              </div>
          </div>
          <div class="card-text-white bg-danger">
              <div class="card-body">
                  <h4 class="card-title">DANGER</h4>
              </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">
      <link rel="stylesheet"
      <script src=
      <script src=
      <script src=
    </head>
    <body
       
    <div class="container">
      <h1 style="color:green">GeeksforGeeks</h1>
      <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>
      
    </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">
      <link rel="stylesheet"
      <script src=
      <script src=
      <script src=
    </head>
    <body
       
    <div class="container">
      <h1 style="color:green">GeeksforGeeks</h1>
      <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-block">
        <a href="" class="class-link">Cart</a>
        <a href="" class="class-link">Add Item</a>
    </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">
      <link rel="stylesheet"
      <script src=
      <script src=
      <script src=
    </head>
    <body
       
    <div class="container">
      <h1 style="color:green">GeeksforGeeks</h1>
      <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>
      
    </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">
      <link rel="stylesheet"
      <script src=
      <script src=
      <script src=
    </head>
    <body
       
    <div class="container">
      <h1 style="color:green">GeeksforGeeks</h1>
      <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>
      
    </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.