Cards in Bootstrap 4

Cards are another interesting element of a web page and can be created using Bootstrap 4. These cards can be used for different purposes and provide different styles and features which you will study in this chapter.

What is Card in Bootstrap 4?

Cards are a square or rectangular box-shaped bordered element in which contents reside with some padding around it. Options like contents, headers, footers can also be included in it. One common example where cards are used is when you try to create a profile details with a picture of any person or individual; cards are used for such purposes. Here is a sample look of a card:

Example:

image

Person Name

This is an example text. (Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.)

Basic Card Style in Bootstrap

The class .card is used for creating a basic card. Also, for placing content inside a class, you have to make use of the .card-body class. Here is an HTML for basic card style:

Example:
<div class="card">
     <div class="card-body">The Card body with information.</div>
</div>

Header and Footer within Cards

A designer can also make use of the card for creating page or content headers and footers. For this, the .card-header class and the .card-footer class has to be implemented for creating a header and footer, respectively. Here is a sample code snippet:

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:
Content of a Card Header
The Card body with information.

Cards of Different Colors

Background colors can be added to a class using the contextual classes (.bg-dark, .bg-light, .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, and .bg-secondary).

Example:
Card Header

Primary Card Title

The Card body with information.

Card Header

Secondary Card Title

The Card body with information.

Card Header

Success Card Title

The Card body with information.

Card Header

Danger Card Title

The Card body with information.

Card Header

Warning Card Title

The Card body with information.

Card Header

Info Card Title

The Card body with information.

Card Header

Light Card Title

The Card body with information.

Card Header

Dark Card Title

The Card body with information.

Here is a sample code snippet of how it can be implemented:

Example:
<!-- Card Primary -->
<div class="card text-white bg-primary">
<div class="card-header">Card Header</div>
<div class="card-body">
<h4 class="card-title">Primary Card Title</h4>
<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">
<h4 class="card-title">Secondary Card Title</h4>
<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">
<h4 class="card-title">Success Card Title</h4>
<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">
<h4 class="card-title">Danger Card Title</h4>
<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">
<h4 class="card-title">Warning Card Title</h4>
<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">
<h4 class="card-title">Info Card Title</h4>
<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">
<h4 class="card-title">Light Card Title</h4>
<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">
<h4 class="card-title">Dark Card Title</h4>
<p class="card-text">The Card body with information.</p>
</div>
</div>

Embedding Links and Texts in Card

The class .card-title can be added to include card titles to any heading element. Also, the class .card-text is implemented for removing bottom margins for paragraph <p> element when the last-child is within the .card-body. Also, you can make use of the class .card-link for adding blue color to any link, which also comes with a hover effect in it.

Example:

Card title

Here is your text. Some more text.

Click Me

Example:
<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

It is sometimes necessary to create such a card where users can click anywhere, and this can be achieved by adding the .stretched-link class in the anchor link. This card is used to make the whole card clickable.

Example:

Card title

Here is your text. Some more text.

Click Me

Example:
<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 classes .card-img-top or .card-img-bottom to an <img> tag is used to put an image to the top side of bottom side of the card. This looks something like:

Example:

Person Name

This is an example text. (Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.)

image

image

Person Name

This is an example text. (Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.)

Example:
<div class="card">
<img class="card-img-top img-fluid" src="./avtar.jpg" alt="image" />
<div class="card-body">
<h3 class="card-title">Person Name</h3>
<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 are used for creating a masonry-like grid of cards. As developers keep on adding more cards to the page deck, it will automatically adjust the layout. Again, the .card-group class is used 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:
<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>

Scroll Back to Top