Bootstrap 4 - Cards

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:

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).

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.)

View Profile

Person Name

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

View Profile

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:

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>