Basically, Bootstrap cards are a box container that has by default padding. It has mainly three components namely .card-header
,.card-body
,.card-footer
.
.card-title
class is used to make heading inside the
.card-header
element..card-text
Write text information within the container having .card-body
..card-link
to the link(<a>
)element that is exist either in .card-body
or .card-footer
.
Steps to create basic card:
.card
to the card container.
.card-body
to the card child element base class.
.card-text
to the <div>
and place all text information inside it and put it into .card-body
section.
General Syntax
<div class="card">
<div class="card-body">
<p class="card-text">Card body section consists of text information,images,link,list-group,navs etc.</p>
</div>
</div>
Source Code
<div class="container my-4">
<div class="card p-4">
<div class="card-body">
<p class="card-text">Card body section consists of text information,images,link,list-group,navs etc.</p>
</div>
</div>
</div>
Try it yourself
Source Code : Output
Card body section consists of text information,images,link,list-group,navs etc.
Note:
To create bootstrap basis card,assign .card
to the card container and assign .card-body
to the card child element.Write your text content inside .card-body
section and assign it .card-text
.
Steps to create card having card header and footer:
.card
to the card container.
.card-header
class.
.card-body
class.
.card-footer
class.
.card-title
to any heading element(<h1> to <h6>
) element base class while as card link can be created by assigning .card-link
to the <a>
element base class.Card heading can be placed inside card header and card body while as card link can be placed inside card bpdy and card footer.
General Syntax
<div class="card">
<div class="card-header">Card Heading</div>
<div class="card-body">
<p class="card-text">Write card body content.</p>
</div>
<div class="card-footer">
<a href="#" class="card-link">card-link 1</a>
<a href="#" class="card-link">card-link 2</a>
</div>
</div>
<!--/card-->
Source Code
<div class="container my-4">
<div class="card p-4">
<div class="card-header">Bootstrap card Heading</div>
<div class="card-body">
<p class="card-text">Bootstrap card can support text information,images,link,list-group,navs etc.</p>
</div>
<div class="card-footer">
<a href="#" class="card-link">card-link 1</a>
<a href="#" class="card-link">card-link 2</a>
</div>
</div>
<!--/card-->
</div>
Try it yourself
Source Code : Output
Bootstrap card can support text information,images,link,list-group,navs etc.
Steps to create card with title,text and link:
.card-title
is assigned to <h*>
tag means <h1>
to the <h6>
.card-link
to the <a>
element base class..card-subtitle
to the <h*>
element base class.
General Syntax
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Write card text content.</p>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
Source Code
<div class="container my-3">
<div class="card p-4">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Write card text content.</p>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
</div>
<!--/container-->
Try it yourself
Source Code : Output
Card background color is assigned by applying background utilities classes.These classes are .bg-primary
, .bg-info
,.bg-success
,.bg-danger
, .bg-warning
,.bg-dark
,.bg-light
,.bg-secondary
.
General Syntax
<div class="card bg-primary">
<div class="card-body">
<p class="card-text">Bootstrap card can support text information,images,link,list-group,navs etc.</p>
</div>
</div>
Source Code
<div class="container my-2">
<div class="card bg-primary p-4">
<div class="card-body">
<p class="card-text">Bootstrap card can support text information,images,link,list-group,navs etc.</p>
</div>
</div>
</div>
<!--/container-->
Try it yourself
Source Code : Output
Bootstrap card can support text information,images,link,list-group,navs etc.
Note: To provide different color to the card ,assign background color utility classes(.bg-*
) to the card container base class.
Step to assign card border and text color:
.border-*
contextual class to card container base class.
Card border and text color can be changed by providing followings contextual classes to the parent container that has class.card
.These contextual classes are .border-primary
,.border-secondary
,.border-success
,.border-danger
,.border-warning
,.border-info
,.border-light
,.border-dark
,.border-warning
.
General Syntax
<div class="card border-primary">
<div class="card-body text-primary">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Card Text content.</p>
</div>
</div>
Source Code
<div class="container my-3">
<div class="card border-primary p-4">
<div class="card-body text-primary">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Write card text content here.</p>
</div>
</div>
</div>
<!--/container-->
Try it yourself
Source Code : Output
Write card text content here.
Boostrap card parent container contains .card
while immediate child contains .card-body
.Lets us see by an example.
General Syntax
<div class="card">
<div class="card-body">Basic card</div>
</div>
Source Code
<div class="container my-3">
<div class="card p-4">
<div class="card-body">Basic card</div>
</div>
</div>
<!--/container-->
Try it yourself
Source Code : Output
Boostrap card parent container contains .card
while child elemems contains .card-body
and
.card-header
.Lets us see by an example.
General Syntax
<div class="card">
<div class="card-header">Header</div>
<div class="card-body">Content</div>
</div>
Source Code
<div class="container my-3">
<div class="card p-4">
<div class="card-header">Header</div>
<div class="card-body">Content</div>
</div>
</div>
<!--/container-->
Try it yourself
Source Code : Output
Note: Follow the above mention steps to create bootstrap basic card having header section.
Bootstrap card parent container contains .card
while as child elements contains .card-body
, .card-header
and .card-footer
.Lets us understand it with an example.
General Syntax
<div class="card">
<div class="card-header">Header</div>
<div class="card-body">Content</div>
<div class="card-footer">Footer</div>
</div>
Source Code
<div class="container my-3">
<div class="card p-4">
<div class="card-header">Header</div>
<div class="card-body">Content</div>
<div class="card-footer">Footer</div>
</div>
</div>
<!--/container-->
Try it yourself
Source Code : Output
Boostrap 4 card parent container contains .card
while
as child elemems contains .card-body
,
.card-header
and .card-footer
.Please keep in mind that .card-title
can be used in
inside .card-header
and .card-footer
container..card-link
can be use inside .card-body
and card-footer
container
.Lets us see it with an example
General Syntax
<div class="card">
<div class="card-header">Card Header Section</div>
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Write card text information.</p>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
Source Code
<div class="container-my-3">
<div class="card p-3">
<div class="card-header">Card Header Section</div>
<div class="card-body">
<h4 class="card-title mt-2">Card title</h4>
<p class="card-text">Write card text information.</p>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
</div>
<!--/container-->
Try it yourself
Source Code : Output
To make whole card clickable,use .stretched-link
to the element having .card-link
.
General Syntax
<a href="#" class="btn btn-primary stretched-link">See Profile</a>
Source Code
<div class="container my-3">
<div class="card p-4">
<div class="card-header">Card Header Section</div>
<div class="card-body">
<h4 class="card-title mt-2">Card title</h4>
<p class="card-text">Write card text information.</p>
<div class="card-footer">
<a href="#" class="btn btn-primary stretched-link">See Profile</a>
</div>
</div>
</div>
</div>
<!--/container-->
Try it yourself
Source Code : Output
Write card text information.
To place image at the top of the card, use .card-img-top
to the <img>
base class.
General Syntax
<div class="card">
<img class="card-img-top" src="https://picsum.photos/seed/picsum/200/300" alt="Card image" />
<div class="card-body">
<h4 class="card-title">Card Title</h4>
<p class="card-text">Card text.</p>
<a href="#" class="btn btn-primary">Card link</a>
</div>
</div>
<!--/card-->
Source Code
<div class="container my-3">
<div class="card p-2">
<img class="card-img-top img-fluid" src="https://picsum.photos/seed/picsum/80/70" alt="Card image" />
<div class="card-body text-center mt-3">
<h4 class="card-title">Card Title</h4>
<p class="card-text">Card text.</p>
<a href="#" class="btn btn-primary">Card link</a>
</div>
</div>
<!--/card-->
</div>
<!--container-->
Try it yourself
Source Code : Output
Note: Place image at the top of the card assign.card-img-top
to the <img>
element base class.
To place image at the top of the card, use .card-img-bottom
to the base class.
General Syntax
<div class="card">
<div class="card-body">
<h4 class="card-title">Card Title</h4>
<p class="card-text">Write card text here.</p>
<a href="..." class="btn btn-primary">Get more info</a>
</div>
<img class="card-img-bootom" src="https://picsum.photos/seed/picsum/200/150" alt="Card image" style="width: 100%;" />
</div>
Source Code
<div class="container my-3">
<div class="card p-2">
<div class="card-body my-2 text-center">
<h4 class="card-title">Card Title</h4>
<p class="card-text">Write card text here.</p>
<a href="..." class="btn btn-primary">Get more info</a>
</div>
<img class="card-img-bootom img-fluid" src="https://picsum.photos/seed/picsum/200/150" alt="Card image" style="width: 100%;" />
</div>
</div>
<!--container-->
Try it yourself
Source Code : Output
Note:
Place image at the bottom of the card assign.card-img-bottom
to the <img>
element base class.
To place an image into a card background, use .card-img-overlay
.
General Syntax
<div class="card">
<img class="card-img-top" src="https://picsum.photos/seed/picsum/200/150" alt="Card image" />
<div class="card-img-overlay">
<h4 class="card-title">Card Title</h4>
<p class="card-text">Write card text information.</p>
<a href="..." class="btn btn-primary">Card link</a>
</div>
</div>
Source Code
<div class="container my-3">
<div class="card p-3">
<img class="card-img-top img-fluid" src="https://picsum.photos/seed/picsum/200/150" alt="Card image" />
<div class="card-img-overlay my-4 text-center pt-4">
<h4 class="card-title">Card Title</h4>
<p class="card-text">Write card text information.</p>
<a href=".." class="btn btn-primary">Card link</a>
</div>
</div>
</div>
<!--/container-->
Try it yourself
Source Code : Output