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>
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" /> <!-- 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
filter_none
Output:
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" /> <!-- 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
filter_none
Output:
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" /> <!-- 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
filter_none
Output:
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" /> <!-- 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
filter_none
Output:
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" /> <!-- 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
filter_none
Output:
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" /> <!-- 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
filter_none
Ouput:
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" /> <!-- 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
filter_none
Output:
Example:
<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
filter_none
OUTPUT:
Example:
<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
filter_none
Output:
Example:
<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
filter_none
Output:
Example:
<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
filter_none
Output:
