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: