Bootstrap | Cards - GeeksforGeeks

12 Oct, 2021
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:
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">    <link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">    </script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">    </script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">    </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:
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">  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script></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:
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">  <link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script></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:
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">  <link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script></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 front-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:
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">  <link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script></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 front-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:
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">  <link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script></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 front-end and        back-end </p>         <a href="#" class="btn btn-primary">See Profile</a>    </div>    </div>  </div></div> </body></html>
Output:
EXAMPLE FOR CARD-GROUP : 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">  <link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script></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
<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"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script></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
<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"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script></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
<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"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script></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
<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"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script></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:
Supported Browser:
Google Chrome
Microsoft Edge
Firefox
Opera
Safari 
Code_Mech
ysachin2314
simmytarika5
Bootstrap
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
How to change navigation bar color in Bootstrap ?
Form validation using jQuery
How to align navbar items to the right in Bootstrap 4 ?
How to pass data into a bootstrap modal?
How to Show Images on Click using HTML ?
Top 10 Front End Developer Skills That You Need in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?