Skip to content
Related Articles

Related Articles

Bootstrap | Cards
  • Difficulty Level : Medium
  • Last Updated : 01 Jul, 2019

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:




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

    
    

    Output:

  • HEADER AND FOOTER :The card-header provides header to the cards and card-footer provides footer to the cards.

    Example:




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

    
    

    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:




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

    
    

    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:






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

    
    

    Output:

  • EXAMPLE OF BOTTOM-IMAGE :
    Example:




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

    
    

    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:




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

    
    

    Ouput:

  • EXAMPLE FOR CARD-GROUP :
    Example:




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

    
    

    Output:

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




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

    
    

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

    
    

    Output:

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




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

    
    

    Output:

  • ANOTHER EXAMPLE in PILLS FORM :
    Example:




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

    
    

    Output:

  • My Personal Notes arrow_drop_up
    Recommended Articles
    Page :