Bootstrap 4 Cards are interesting web page elements used for different purposes with different styles and features, which you will study in this tutorial.
What is Card in Bootstrap 4?
A Bootstrap 4 card is a square or rectangular box-shaped border element with some padding. It includes options like content, header, and footer. A typical example of a card is when you try to create profile details with a picture of a person or entity; Cards are helpful for such purposes. Here is a sample example of the card:
Example:
Person Name
This is an example text. (Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.)
Basic Card Style in Bootstrap 4
Bootstrap 4 provides a .card
class to create a card and a .card-body
class to place the contents inside the card. Here's an HTML for the primary card structure:
Example:
<div class="card">
<div class="card-body">The Card body with information.</div>
</div>
Card Header and Footer in Bootstrap 4
A card may require a header and footer. For this, Bootstrap 4 provides the .card-header
, .card-body
, and .card-footer
classes to be used respectively inside the card.
Example:
<div class="card">
<div class="card-header">Content of a Card Header</div>
<div class="card-body">The Card body with information.</div>
<div class="card-footer">Content of a Card Footer</div>
</div>
Output:
Cards of Different Colors
Background colors can be added to a card using the contextual classes (.bg-dark
, .bg-light
, .bg-primary
, .bg-success
, .bg-info
, .bg-warning
, .bg-danger
, and .bg-secondary
).
Primary Card Title
The Card body with information.
Secondary Card Title
The Card body with information.
Success Card Title
The Card body with information.
Danger Card Title
The Card body with information.
Warning Card Title
The Card body with information.
Info Card Title
The Card body with information.
Light Card Title
The Card body with information.
Dark Card Title
The Card body with information.
Below is the code snippet of the above contextual classes example:
Example Code:
<!-- Card Primary -->
<div class="card text-white bg-primary">
<div class="card-header">Card Header</div>
<div class="card-body">
<h5 class="card-title">Primary Card Title</h5>
<p class="card-text">The Card body with information.</p>
</div>
</div>
<!-- Card Secondary -->
<div class="card text-white bg-secondary">
<div class="card-header">Card Header</div>
<div class="card-body">
<h5 class="card-title">Secondary Card Title</h5>
<p class="card-text">The Card body with information.</p>
</div>
</div>
<!-- Card Success -->
<div class="card text-white bg-success">
<div class="card-header">Card Header</div>
<div class="card-body">
<h5 class="card-title">Success Card Title</h5>
<p class="card-text">The Card body with information.</p>
</div>
</div>
<!-- Card Danger -->
<div class="card text-white bg-danger">
<div class="card-header">Card Header</div>
<div class="card-body">
<h5 class="card-title">Danger Card Title</h5>
<p class="card-text">The Card body with information.</p>
</div>
</div>
<!-- Card Warning -->
<div class="card text-white bg-warning">
<div class="card-header">Card Header</div>
<div class="card-body">
<h5 class="card-title">Warning Card Title</h5>
<p class="card-text">The Card body with information.</p>
</div>
</div>
<!-- Card Info -->
<div class="card text-white bg-info">
<div class="card-header">Card Header</div>
<div class="card-body">
<h5 class="card-title">Info Card Title</h5>
<p class="card-text">The Card body with information.</p>
</div>
</div>
<!-- Card Light -->
<div class="card bg-light">
<div class="card-header">Card Header</div>
<div class="card-body">
<h5 class="card-title">Light Card Title</h5>
<p class="card-text">The Card body with information.</p>
</div>
</div>
<!-- Card Dark -->
<div class="card text-white bg-dark">
<div class="card-header">Card Header</div>
<div class="card-body">
<h5 class="card-title">Dark Card Title</h5>
<p class="card-text">The Card body with information.</p>
</div>
</div>
Embedding Links and Texts in Card
The class .card-title
applies the card title to the card body. Additionally, the class .card-text
is applied to remove the bottom margin of a paragraph <p>
element when the last child is within the .card-body
. You can also use the class .card-link
for adding blue color to any hyperlink, which also comes with a hover effect.
Example Code:
<div class="card" style="width: 18rem;">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Here is your text. Some more text.</p>
<a href="#" class="card-link">Click Me</a>
</div>
</div>
Stretched Link
Sometimes it is necessary to create a card that users can click anywhere. The .stretched-link
class makes the entire card clickable.
Example Code:
<div class="card" style="width: 18rem;">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Here is your text. Some more text.</p>
<a href="#" class="card-link stretched-link">Click Me</a>
</div>
</div>
Image Placement Within the Card
The class .card-img-top
and .card-img-bottom
applies to a <img>
tag, used to place the image on the top or bottom of the card. It looks something like:
Person Name
An example text. (Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.)

Person Name
An example text. (Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.)
Example Code:
<div class="card">
<img class="card-img-top img-fluid" src="./avtar.jpg" alt="image" />
<div class="card-body">
<h4 class="card-title">Person Name</h4>
<p class="card-text">This is an example text. (Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.)</p>
<button class="btn btn-primary">View Profile</button>
</div>
</div>
Column-wise and group-wise Cards
The class .card-columns
creates a masonry-like grid of cards. As developers add more cards to the page deck, it will automatically adjust the layout. Furthermore, the .card-group
class is for grouping cards. These look something like:
Content 1
Content 2
Content 3. (Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.)
Content 4
Content 5
Group Data 1
Group Data 2
Example Code:
<div class="card-columns">
<div class="card bg-light">
<div class="card-body text-center">
<p class="card-text"> Content 1 </p>
</div>
</div>
<div class="card bg-light">
<div class="card-body text-center">
<p class="card-text"> Content 2 </p>
</div>
</div>
<div class="card bg-light">
<div class="card-body text-center">
<p class="card-text"> Content 3. (Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.) </p>
</div>
</div>
<div class="card bg-light">
<div class="card-body text-center">
<p class="card-text"> Content 4 </p>
</div>
</div>
<div class="card bg-light">
<div class="card-body text-center">
<p class="card-text"> Content 5 </p>
</div>
</div>
</div>
<div class="card-group">
<div class="card bg-light">
<div class="card-body text-center">
<p class="card-text"> Group Data 1 </p>
</div>
</div>
<div class="card bg-light">
<div class="card-body text-center">
<p class="card-text"> Group Data 2 </p>
</div>
</div>
</div>