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>
- Basic Card: The basic building block of a card is the card-body and with card class as a parent we can create a basic 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 =
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 >
|
Output:
- Header and Footer: The card-header provides a header to the cards and card-footer provides a footer to the cards as given below.
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 =
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 >
|
Output:
- Title and Links: The card-title is used to give a title to the card and card-link is used to provide a 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 =
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 >
|
Output:
- Images: The images to the card are inserted with card-img-top and with card-img-bottom with the help of these two and img tag is used with it to add 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 =
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 >
|
Output:
- Example of the image in the button:
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 =
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 >
|
Output:
- Image Overlays: In this, we have to use an extra class called the card-img-overlay in the same line of code which you have used for card images. This turns an image into a card background and overlays the card’s text.
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 =
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
front-end and back-end
</ p >
< a href = "#" class = "btn btn-primary" >
See Profile
</ a >
</ div >
</ div >
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
- Card Groups: Use card groups to render cards as a single, attached element with equal width and height columns.
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 =
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 >
|
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 =
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 >
|
Output:
- Kitchen sink: It is a name given to the type of card which consists of everything thing in it, it’s a mix and match of multiple contents to make your desired card
Example:
Code block
Output:
- Navigation: It adds a 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 =
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 >
|
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 =
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 >
|
Output:
Text Alignment in Card:
We can easily change the text alignment of any card or a specific part of a card in Bootstrap using the Bootstrap text alignment classes of Bootstrap.
Here is a code example displaying the examples in which we have to change the alignment of a whole card or specific part of a card using the text-align classes.
Code:
and
Output:
Horizontal Card:
Using the grid class utility, we can create a card where the card image and card body are horizontally placed instead of being vertically placed using the grid utility classes. This feature is also mobile-friendly and also is useful for responsive websites.
Here is a code example in which we have created a sample card where the image and the card body text are horizontally placed.
Code:
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 =
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 >
< div class = "container mt-3" >
< h1 style = "color: green; text-align: center;" >
GeeksforGeeks
</ h1 >
</ div >
< div class = "card mb-2" style = "max-width: 540px;" >
< div class = "row g-0" >
< div class = "col-md-6" >
< img src = "gfg.jpg" class = "img-fluid rounded-start"
alt = "..." >
</ div >
< div class = "col-md-6" >
< div class = "card-body" >
< h5 class = "card-title" >
Card title
</ h5 >
< p class = "card-text" >
The card body and the card image
is placed horizontally.
</ p >
</ div >
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Changing the color of the Card:
We can change the color of the card using the background utility classes and the text-color classes in Bootstrap.
Syntax:
<div class="card text-white bg-primary"></div>
Code:
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 =
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 >
< div class = "container mt-3" >
< h1 style = "color: green; text-align: center;" >
GeeksforGeeks
</ h1 >
</ div >
< div class = "card text-white bg-primary mb-3"
style = "max-width: 18rem;" >
< div class = "card-header" >
This is the card header
</ div >
< div class = "card-body" >
< h5 class = "card-title" >
This is card title
</ h5 >
< p class = "card-text" >
This is the body of the card
made using Bootstrap Classes.
</ p >
</ div >
</ div >
< div class = "card text-white bg-secondary mb-3"
style = "max-width: 18rem;" >
< div class = "card-header" >
This is the card header
</ div >
< div class = "card-body" >
< h5 class = "card-title" >
This is card title
</ h5 >
< p class = "card-text" >
This is the body of the card
made using Bootstrap Classes.
</ p >
</ div >
</ div >
< div class = "card text-white bg-success mb-3"
style = "max-width: 18rem;" >
< div class = "card-header" >
This is the card header
</ div >
< div class = "card-body" >
< h5 class = "card-title" >
This is card title
</ h5 >
< p class = "card-text" >
This is the body of the card
made using Bootstrap Classes.
</ p >
</ div >
</ div >
< div class = "card text-white bg-danger mb-3"
style = "max-width: 18rem;" >
< div class = "card-header" >
This is the card header
</ div >
< div class = "card-body" >
< h5 class = "card-title" >
This is card title
</ h5 >
< p class = "card-text" >
This is the body of the card
made using Bootstrap Classes.
</ p >
</ div >
</ div >
</ body >
</ html >
|
Output:
Adding Borders to Cards:
We can add borders to the cards using the border-utilities classes present in the Bootstrap Framework like border-primary, border-success, border-danger, and many more.
Syntax:
<div class="card border-primary"></div>
Full Code:
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 =
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 >
< div class = "container mt-3" >
< h1 style = "color: green; text-align: center;" >
GeeksforGeeks
</ h1 >
</ div >
< div class = "card border-primary text-primary mb-3"
style = "max-width: 18rem;" >
< div class = "card-header" >
This is the card header
</ div >
< div class = "card-body" >
< h5 class = "card-title" >
This is card title
</ h5 >
< p class = "card-text" >
This is the body of the card
made using Bootstrap Classes.
</ p >
</ div >
</ div >
< div class = "card text-success border-success mb-3"
style = "max-width: 18rem;" >
< div class = "card-header" >
This is the card header
</ div >
< div class = "card-body" >
< h5 class = "card-title" >
This is card title
</ h5 >
< p class = "card-text" >
This is the body of the card
made using Bootstrap Classes.
</ p >
</ div >
</ div >
< div class = "card text-secondary border-secondary mb-3"
style = "max-width: 18rem;" >
< div class = "card-header" >
This is the card header
</ div >
< div class = "card-body" >
< h5 class = "card-title" >
This is card title
</ h5 >
< p class = "card-text" >
This is the body of the card
made using Bootstrap Classes.
</ p >
</ div >
</ div >
< div class = "card text-danger border-danger mb-3"
style = "max-width: 18rem;" >
< div class = "card-header" >
This is the card header
</ div >
< div class = "card-body" >
< h5 class = "card-title" >
This is card title
</ h5 >
< p class = "card-text" >
This is the body of the card
made using Bootstrap Classes.
</ p >
</ div >
</ div >
</ body >
</ html >
|
Output:
Supported Browsers:
- Google Chrome
- Mozilla Firefox
- Safari
- Brave Browsers
- Opera
Last Updated :
19 May, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...