Bootstrap 4 Cards
Bootstrap 4 cards are a box container that contains by default padding. It has mainly three components namely .card-header,.card-body,.card-footer.
Steps To Create Bootstrap 4 Basic Card
-
.card-titleclass is used to make heading inside the elements having class.card-header. -
.card-textclass is used to provide text information within child elements having class.card-body. -
.card-linkclass is used to provide link inside the child element having class.card-body or - Following components like text content, images, list-group, nav, link, etc can be put inside the card. undefined
.card-footer.
Example
Flower: Rose
Rose is the world one of the most beautiful flower that is the representation of love.
Bird
This bird stands on the tree and looking so cute dute to nature.
General Syntax
<div class="card">
<div class="card-header"></div>
<div class="card-body"></div>
<div class="card-footer"></div>
</div>
Source Code
<div class="container text-center mt-4">
<h2 class="text-center">Bootstrap Card</h2>
<div class="card">
<div class="card-header">Web Development</div>
<div class="card-body">
<p class="card-text">There are various languages used during web development.</p>
</div>
<div class="card-footer">
<a href="#" class="card-link">Learn Web Development</a>
<a href="#" class="card-link">Learn Graphics Design</a>
</div>
</div>
</div>
Source Code: Output
Bootstrap Card
There are various languages used during web development.
Bootstrap card is basically a rectangular box having by default padding. It is of two types namely horizontal card and vertical card.
Note:
In the above example, .card,.card-header,.card-body & .card-link classes are used to make simple bootstrap card.
Card Background Color
Card background color can be achieved by applying bootstrap background color contextual classes.These classes are
.bg-primary, .bg-info,.bg-success,.bg-danger, .bg-warning,.bg-dark,.bg-light,.bg-secondary.
Example
Primary card supports text information,images,link,list-group,navs etc.
Danger card supports text information,images,link,list-group,navs etc.
Success card supports text information,images,link,list-group,navs etc.
Info card supports text information,images,link,list-group,navs etc.
Light card supports text information,images,link,list-group,navs etc.
Dark card supports text information,images,link,list-group,navs etc.
secondary card supports text information,images,link,list-group,navs etc.
Source Code
<div class="container text-center mt-4">
<h2 class="text-center">Card Background Color</h2>
<div class="card bg-primary text-white">
<div class="card-body">
<p class="card-text">Bootstrap card can support text information,images,link,list-group,navs etc.</p>
</div>
</div>
</div>
Source Code: Output
Card Background Color
Bootstrap card can support text information,images,link,list-group,navs etc.
Note: In the above example,bootstrap background color utility classes are used to change the card background color.
Card Border and Text Color
Card border and card text color can be chnged by providing followings contextual class 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="row">
<div class="col-sm-6">
<div class="card border-primary mb-4">
<div class="card-body text-primary">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Write down primary card content.</p>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card border-secondary mb-4">
<div class="card-body text-secondary">
<h5 class="card-title">Secondary card title</h5>
<p class="card-text">Mention about secondary card content./p>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card border-success mb-4">
<div class="card-body text-success">
<h5 class="card-title">Success card title</h5>
<p class="card-text">Write down success card content.</p>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card border-danger mb-4">
<div class="card-body text-danger">
<h5 class="card-title">Danger card title</h5>
<p class="card-text">Explain about danger card content.</p>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card border-warning mb-4">
<div class="card-body text-warning">
<h5 class="card-title">Warning card title</h5>
<p class="card-text">Write down waring card content.</p>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card border-info mb-4">
<div class="card-body text-info">
<h5 class="card-title">Info card title</h5>
<p class="card-text">Write down info card content.</p>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card border-dark mb-4">
<div class="card-body text-dark">
<h5 class="card-title">Dark card title</h5>
<p class="card-text">Write card content.</p>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card border-light mb-4">
<div class="card-body text-muted">
<h5 class="card-title">Light card title</h5>
<p class="card-text">Describe card content.</p>
</div>
</div>
</div>
</div>
<!--/row-->
Card border and card text color can be changed by card border utility claseses.
Bootstrap Card Type
Simple Card
Bootstrap card parent container contains .card while as immediate child contains .card-body.Lets us see it by an example.
Source Code
<div class="container text-center mt-4">
<h2 class="text-center">Bootstrap Simple Card</h2>
<div class="card">
<div class="card-body">Basic card</div>
</div>
</div>
<!--/container-->
Source Code: Output
Bootstrap Simple Card
Note: In this example,.card & .card-body is used to make simplest card.
Card With Header
Bootstrap card parent container contains .card while as child elements contains .card-body and
.card-header.Lets us see it by an example.
General Syntax
<div class="card">
<div class="card-header">Card Header</div>
<div class="card-body">Write card content here.</div>
</div>
Source Code
<div class="container text-center mt-4">
<h2 class="text-center">Card With Header</h2>
<div class="card">
<div class="card-header">Card Header</div>
<div class="card-body">Please write your card content.</div>
</div>
</div>
<!--/container-->
Source Code: Output
Card With Header
Note:
In this example,.card, .card-body & .card-header is used to make simplest card with header component.
Bootstrap Card With Header And Footer
Bootstrap 4 card parent container contains .card while as child elements contains .card-body ,
.card-header and .card-footer
.Lets us see it by an example.
General Syntax
<div class="card">
<div class="card-header">Card Header</div>
<div class="card-body">Write your card content.</div>
<div class="card-footer">Card Footer</div>
</div>
Source Code
<div class="container text-center mt-4">
<h2 class="text-center">Card With Header And Footer</h2>
<div class="card">
<div class="card-header">Card Header</div>
<div class="card-body">Write Card content,here.</div>
<div class="card-footer">Card Footer</div>
</div>
</div>
Source Code: Output
Card With Header And Footer
Note:
In this example,.card, .card-body ,.card-header & .card-footer is used to make simplest card with header & footer.
Bootstrap Card With Header, Footer And Link
Bootstrap 4 card parent container contains .card while as child elements 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</div>
<div class="card-body">
<h4 class="card-title text-muted">Card Body Text</h4>
<p class="card-text">Write your card content now.</p>
</div>
<div class="card-footer">
<h4 class="card-title text-muted">Card Footer Text</h4>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
<!--card-->
Source Code
<div class="container text-center mt-4">
<h2 class="text-center">Card With Header,Footer & Link</h2>
<div class="card text-center">
<div class="card-header">Card Header</div>
<div class="card-body">
<h4 class="card-title text-muted">Card Body Text</h4>
<p class="card-text">Write your card content now.</p>
</div>
<div class="card-footer">
<h4 class="card-title text-muted">Card Footer Text</h4>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
</div>
<!--/container-->
Source Code: Output
Card With Header,Footer & Link
Card Body Text
Write your card content now.
Note: In this example,.card, .card-body ,.card-header,.card-footer & .card-link is used to make simplest card with header , footer & card link.
Bootstrap Stretched Link
To make whole card clickable,use .stretched-link to the element having .card-link.
Example
Flower:Rose
Rose is the world one of the most beautiful flower that is the representation of love.
Bird
This bird stands on the tree and looking so cute due to nature.
Source Code
<div class="container text-center mt-4">
<h2 class="text-center">Card Stretched Link</h2>
<div class="row">
<div class="col-sm-6 col-12 text-center mb-2">
<div class="card" style="width: 80%; margin: auto;">
<img src="https://picsum.photos/id/237/200/300" class="card-img-top" alt="Thumbnail Image" />
<div class="card-body">
<div class="card-title">
<h2>Card:<b>Title</b></h2>
</div>
<p class="card-text">Write card content here.</p>
</div>
<div class="card-footer">
<a href="#" class="card-link btn btn-success stretched-link">More Info</a>
</div>
</div>
</div>
<!--/col-sm-6 col-12-->
<div class="col-sm-6 col-12 text-center">
<div class="card text-center" style="width: 80%; margin: auto;">
<img src="https://picsum.photos/id/237/200/300" class="rounded img-fluid" alt="Bootstrap card" />
<div class="card-body">
<div class="card-title"><h2>Card Title</h2></div>
<p class="card-text">Write your card content here.</p>
</div>
<div class="card-footer">
<a href="#" class="card-link btn btn-success stretched-link">More Info</a>
</div>
</div>
</div>
</div>
<!--/row-->
</div>
<!--/container-->
Source Code: Output
Card Stretched Link
Card:Title
Write card content here.
Card Title
Write your card content here.
Note: To create whole card clickable, assign .stretched-link to the
card link having .card-link.
Bootstrap Card Image
Case1:Placing image at the top of the card
To place image at the top of the card,use .card-img-top to the <img> base class.
General Syntax
<div class="row">
<div class="col-sm-6 col-12 text-center mb-2">
<div class="card" style="width: 90%; margin: auto;">
<img class="card-img-top img-fluid" src="https://picsum.photos/id/237/200/200" alt="Card image" />
<div class="card-body">
<h4 class="card-title">Card Title</h4>
<p class="card-text">This is card text</p>
<a href="#" class="btn btn-primary">Card Link</a>
</div>
</div>
</div>
<!--/col-sm-6 col-12-->
<div class="col-sm-6 col-12 text-center">
<div class="card" style="width: 90%; margin: auto;">
<div class="card-body">
<h4 class="card-title">Card Title</h4>
<p class="card-text">This is card text</p>
<a href="#" class="btn btn-primary">Card Link</a>
</div>
<img src="https://picsum.photos/id/1/200/200" class="card-img-bottom rounded img-fluid" alt="Rounded Image" />
</div>
</div>
<!--/col-sm-6-->
</div>
<!--/row-->
Source Code
<div class="container text-center mt-4">
<h2 class="my-5">Bootstrap Card</h2>
<div class="row">
<div class="col-sm-6 col-12 text-center mb-2">
<div class="card" style="width: 90%; margin: auto;">
<img class="card-img-top" src="https://picsum.photos/id/237/200/200" alt="Card image" />
<div class="card-body">
<h4 class="card-title">Card Title</h4>
<p class="card-text">This is card text</p>
<a href="#" class="btn btn-primary">Card Link</a>
</div>
</div>
</div>
<!--/col-sm-6 col-12-->
<div class="col-sm-6 col-12 text-center">
<div class="card" style="width: 90%; margin: auto;">
<div class="card-body">
<h4 class="card-title">Card Title</h4>
<p class="card-text">This is card text</p>
<a href="#" class="btn btn-primary">Card Link</a>
</div>
<img src="https://picsum.photos/id/1/200/200" class="card-img-bottom rounded img-fluid" alt="Rounded Image" />
</div>
</div>
<!--/col-sm-6-->
</div>
<!--/row-->
</div>
<!--/container-->
Source Code: Output
Note:
To place image at the top of the card,assign .card-img-top to the <img> element base class.
Case2:Placing image as a background of the card
To place an image into a card background ,use .card-img-overlay.
General Syntax
<div class="card text-center" style="width: 90%; margin: auto;">
<img src="../../code-support/images/bootstrap/rose-flower.jpg" alt="Thumbnail Image" />
<div class="card-img-overlay">
<h2 class="card-title">Flower: Rose</h2>
<p class="card-text">This is the most beautiful flower in the world</p>
<a href="#" class="btn btn-success">See More</a>
</div>
</div>
Source Code
<div class="container text-center mt-4">
<h2 class="text-center">Placing image as a background of the card</h2>
<div class="row">
<div class="col-12 col-sm-8 offset-sm-2">
<div class="card" style="width: 90%; margin: auto;">
<img src="https://picsum.photos/id/1/200/300" class="img-thumbnail img-fluid"
alt="Thumbnail Image" style="height: 300px;" />
<div class="card-img-overlay text-white">
<h4 class="card-title">Card Header</h4>
<p class="card-text">Write your card content text.</p>
<a href="#" class="btn btn-primary">See More</a>
</div>
</div>
</div>
<!--/offset-sm-2-->
</div>
<!--/row-->
</div>
<!--/container-->
Source Code: Output
Placing image as a background of the card
Note:
To place the image in the background of the card,use .card-img-overlay inside the card.
Bootstrap 4 Card Layout
1.0 Card-column
Bootstrap .card-columns creates grid of card that might have different width and height of the card.It shows vertical card inside small device.
General Syntax
<div class="card-columns">
<div class="card bg-primary">
<div class="card-body text-center">
<p class="card-text">Some text inside the first card</p>
</div>
</div>
<div class="card bg-warning">
<div class="card-body text-center">
<p class="card-text">Some text inside the second card</p>
</div>
</div>
<div class="card bg-success">
<div class="card-body text-center">
<p class="card-text">Some text inside the third card</p>
</div>
</div>
<div class="card bg-danger">
<div class="card-body text-center">
<p class="card-text">Some text inside the fourth card</p>
</div>
</div>
<div class="card bg-light">
<div class="card-body text-center">
<p class="card-text">Some text inside the fifth card</p>
</div>
</div>
<div class="card bg-info">
<div class="card-body text-center">
<p class="card-text">Some text inside the sixth card</p>
</div>
</div>
</div>
Source Code
<div class="container text-center mt-4">
<h2 class="text-center">Card Column</h2>
<div class="row">
<div class="col-12 col-sm-8 offset-sm-2">
<div class="card-columns">
<div class="card bg-primary">
<div class="card-body text-center">
<p class="card-text">Some text inside the first card</p>
</div>
</div>
<div class="card bg-warning">
<div class="card-body text-center">
<p class="card-text">Some text inside the second card</p>
</div>
</div>
</div>
</div>
<!--/offset-sm-2-->
</div>
<!--/row-->
</div>
<!--/container-->
Note: Card column creates different width and height of the card and it shows vertical in smaller devices.
card-deck
Bootstrap .card-deck creates equal height and width of the card.
General Syntax
<div class="card-deck">
<div class="card bg-primary">
<div class="card-body text-center">
<p class="card-text">Some text inside the first card</p>
</div>
</div>
<div class="card bg-warning">
<div class="card-body text-center">
<p class="card-text">Some text inside the second card</p>
</div>
</div>
<div class="card bg-success">
<div class="card-body text-center">
<p class="card-text">Some text inside the third card</p>
</div>
</div>
<div class="card bg-danger">
<div class="card-body text-center">
<p class="card-text">Some text inside the fourth card</p>
</div>
</div>
</div>
Source Code
<div class="container text-center mt-4">
<h2 class="text-center">Bootstrap Card-deck</h2>
<div class="card-deck">
<div class="card bg-primary">
<div class="card-body text-center">
<p class="card-text">Some text inside the first card</p>
</div>
</div>
<div class="card bg-warning">
<div class="card-body text-center">
<p class="card-text">Some text inside the second card</p>
</div>
</div>
</div>
</div>
<!--/container-->
Note: Card-deck is a container of cards.It creates equal height and width of the card.
Card-group
Card-group is basically a container of cards.It contains more than one cards.Bootstrap .card-group removes left and right padding of each cards.
General Syntax
<div class="card-group">
<div class="card bg-primary">
<div class="card-body text-center">
<p class="card-text">Some text inside the first card</p>
</div>
</div>
<div class="card bg-warning">
<div class="card-body text-center">
<p class="card-text">Some text inside the second card</p>
</div>
</div>
<div class="card bg-success">
<div class="card-body text-center">
<p class="card-text">Some text inside the third card</p>
</div>
</div>
<div class="card bg-danger">
<div class="card-body text-center">
<p class="card-text">Some text inside the fourth card</p>
</div>
</div>
</div>
Source Code
<div class="container text-center mt-4">
<h2 class="text-center">Bootstrap Card-group</h2>
<div class="card-group">
<div class="card bg-primary">
<div class="card-body text-center">
<p class="card-text">Some text inside the first card</p>
</div>
</div>
<div class="card bg-warning">
<div class="card-body text-center">
<p class="card-text">Some text inside the second card</p>
</div>
</div>
</div>
</div>
<!--/container-->
Note: Card-group is a container that consists of more than one card inside the card-group.
Bootstrap 4 Cards: Horizontal Card
Horizontal cards consists of image and text content and those are placed side-by-side using a combination of grid and utility classes.
General Syntax
<div class="card p-4">
<div class="row no-gutters">
<div class="col-sm-6" style="background: #868e96;">
<img src="https://picsum.photos/id/1/100/100" class="card-img-top h-100" alt="Horrizontal card image" />
</div>
<div class="col-sm-6">
<div class="card-body">
<h5 class="card-title">Card Header</h5>
<p class="card-text">Write card text here.</p>
<a href="#" class="btn btn-primary stretched-link">Card Link</a>
</div>
</div>
</div>
</div>
Source Code
<div class="container text-center mt-4">
<h2 class="text-center">Bootstrap Horizontal Card</h2>
<div class="row">
<div class="col-sm-8 offset-sm-2">
<div class="card">
<div class="row no-gutters">
<div class="col-sm-5 col-md-6">
<img src="https://picsum.photos/id/1/200/300" class="card-img-top" alt="Horrizontal card image"
style="width: 200px; height: 200px;" />
</div>
<div class="col-sm-7 col-md-6">
<div class="card-body">
<h5 class="card-title">Photo</h5>
<p class="card-text">This is random photo.</p>
<a href="#" class="btn btn-primary stretched-link">More Info.</a>
</div>
</div>
</div>
</div>
<!--/row-->
</div>
</div>
</div>
<!--/container-->
Note: Bootstrap horizontal card consists of image and text content that lies horizontally left to right.
Web Tutorials
