Bootstrap 4 Cards


Cards

Bootstrap 4 cards is a bordered box with some padding around its content. It includes options for headers, footers, body, color, etc.

user
User

Some example text some example text. Some example text some example text. Some example text some example text. Some example text some example text.


Create a Normal Card

A normal card is created with the .card class, and content inside the card has a .card-body class:

Normal Card

Example Code

<div class="card">
<div class="card-body">Normal Card</div>
</div>

Card Header and Footer

The .card-header class adds heading of a card and the .card-footer class adds footer of a card:

Header content
Body content

Example Code

<div class="card">
<div class="card-header">Header content</div>
<div class="card-body">Body content</div>
<div class="card-footer">Footer content</div>
</div>

Adding Card background color

To add a background color of a card, use contextual classes .bg-primary,.bg-success,.bg-secondary,.bg-info,.bg-warning,.bg-light,.bg-danger and .bg-dark.

Normal Card
bg-primary
bg-secondary
bg-success
bg-warning
bg-danger
bg-info
bg-dark
bg-light

Example Code

<div class="card">
<div class="card-body">Normal Card</div>
</div>
<div class="card bg-primary">
<div class="card-body">bg-primary</div>
</div>
<div class="card bg-secondary">
<div class="card-body">bg-secondary</div>
</div>
<div class="card bg-success">
<div class="card-body">bg-success</div>
</div>
<div class="card bg-warning">
<div class="card-body">bg-warning</div>
</div>
<div class="card bg-danger">
<div class="card-body">bg-danger</div>
</div>
<div class="card bg-info">
<div class="card-body">bg-info</div>
</div>
<div class="card bg-dark">
<div class="card-body">bg-dark</div>
</div>
<div class="card bg-light">
<div class="card-body">bg-light</div>
</div>

Create Card Title,Text,Link

Title

some text.some text.some text.some text.some text.

Link1 Link2

Example Code

<div class="card">
<div class="card-body">
<h5 class="card-title">Title</h5>
<p class="card-text">some text.some text.some text.some text.some text.</p>
<a href="#" class="card-link">Link1</a>
<a href="#" class="card-link">Link2</a>
</div>
</div>

Card Images

.card-img-top class are used to image placed top position.

user
User

Some example text some example text. Some example text some example text. Some example text some example text. Some example text some example text.

Example Code

<div class="card">
<img class="card-img-top" src="./picture1">
<div class="card-body">
<h5>User</h5>
<p>Some example text some example text. Some example text some example text. Some example text some example text. Some example text some example text.</p>
<button class="btn btn-primary"> Profile</button>
</div>
</div>

.card-img-bottom class are used to image placed bottom position.

User

Some example text some example text. Some example text some example text. Some example text some example text. Some example text some example text.

user

Example Code

<div class="card">
<div class="card-body">
<h5>User</h5>
<p>Some example text some example text. Some example text some example text. Some example text some example text. Some example text some example text.</p>
<button class="btn btn-primary"> Profile</button>
</div>
<img class="card-img-bottom" src="./picture1">
</div>

Card Image Overlays

Turn into an image to a card background and use .card-img-overlay class to adds text on top of the image.

user
User

Some example text some example text. Some example text some example text. Some example text some example text. Some example text some example text.

Example Code

<div class="card">
<img class="card-img-top" src="./picture1">
<div class="card-img-overlay">
<h5>User</h5>
<p>Some example text some example text. Some example text some example text. Some example text some example text. Some example text some example text.</p>
<button class="btn btn-primary"> Profile</button>
</div>
</div>