Bootstrap 4 Card Classes

In this write-up, we will learn about Bootstrap 4 Card classes. Bootstrap is an open source framework to create responsive web applications. Bootstrap card classes are useful to create a bordered box. Bootstrap 4 cards classes replace old panels, walls, and thumbnails. In this blog, we will discuss the following classes.

Basic card
Header Card
Footer card
Titles, text, and links
Card Image
Card Columns
Card Deck
Card Group
Contextual color

Basic card

By using .card and .card-body class, we can create a container or a Box.

Open Visual Studio and create a new project. Rename it as Bootstrap4 Table and add the reference of the Bootstrap 4 files into the page's head section. In the body section, add some divs and add basic card class.

<div class="card">
<div class="card-body"> Basic Card Class </div>
</div>

Complete Code

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Bootstarp 4 Card Classes</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="card">
<div class="card-body"> Basic Card Class </div>
</div>
</div>
</body>
</html>

Run the project and check the result.

Header and Footer card classes

These classes are used to add a header and a footer to a card.

.card-header
.card-footer

<div class="card-header text-center"> Card Header </div>
<div class="card-body text-center"> Basic Body </div>
<div class="card-footer text-center"> Card Footer </div>

Complete Code

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Bootstarp 4 Card Classes</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="card">
<div class="card-header text-center"> Card Header </div>
<div class="card-body text-center"> Basic Body </div>
<div class="card-footer text-center"> Card Footer </div>
</div>
</div>
</body>
</html>

Run the project and check result.

Contextual color

These classes are used to add a background color to the card.

.bg-primary,
.bg-success,
.bg-secondary,
.bg-info,
.bg-warning,
.bg-danger,
.bg-dark
.bg-light

Now, add some divs and add these classes.

<div class="container">
<div class="card bg-primary text-white">
<div class="card-body">Primary card</div>
</div>
<br>
<div class="card bg-secondary text-white">
<div class="card-body">Secondary card</div>
</div>
<br>
<div class="card bg-success text-white">
<div class="card-body">Success card</div>
</div>
<br>
<div class="card bg-info text-white">
<div class="card-body">Info card</div>
</div>
<br>
<div class="card bg-warning text-white">
<div class="card-body">Warning card</div>
</div>
<br>
<div class="card bg-danger text-white">
<div class="card-body">Danger card</div>
</div>
<br>
<div class="card bg-dark text-white">
<div class="card-body">Dark card</div>
</div>
<br>
<div class="card bg-light text-dark">
<div class="card-body">Light card</div>
</div>
</div>

Complete code

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Bootstarp 4 Card Classes</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="card bg-primary text-white">
<div class="card-body">Primary card</div>
</div>
<br>
<div class="card bg-secondary text-white">
<div class="card-body">Secondary card</div>
</div>
<br>
<div class="card bg-success text-white">
<div class="card-body">Success card</div>
</div>
<br>
<div class="card bg-info text-white">
<div class="card-body">Info card</div>
</div>
<br>
<div class="card bg-warning text-white">
<div class="card-body">Warning card</div>
</div>
<br>
<div class="card bg-danger text-white">
<div class="card-body">Danger card</div>
</div>
<br>
<div class="card bg-dark text-white">
<div class="card-body">Dark card</div>
</div>
<br>
<div class="card bg-light text-dark">
<div class="card-body">Light card</div>
</div>
</div>
</body>
</html>

Run the project and check the result.

Card Columns

By using this, we can create grids of cards.

.card-columns

Let us add some divs and add the column class.

<div class="card-columns">
<div class="card bg-primary">
<div class="card-body text-center">
<p class="card-text">Card One</p>
</div>
</div>
<div class="card bg-primary">
<div class="card-body text-center">
<p class="card-text">Second Card</p>
</div>
</div>
<div class="card bg-primary">
<div class="card-body text-center">
<p class="card-text">Third card</p>
</div>
</div>
</div>

Complete Code

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Bootstarp 4 Card Classes</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="card-columns">
<div class="card bg-primary">
<div class="card-body text-center">
<p class="card-text">Card One</p>
</div>
</div>
<div class="card bg-primary">
<div class="card-body text-center">
<p class="card-text">Second Card</p>
</div>
</div>
<div class="card bg-primary">
<div class="card-body text-center">
<p class="card-text">Third card</p>
</div>
</div>
</div>
</div>
</body>
</html>

Run the project and check the result.

Summary

In this blog, we learned about Bootstrap Card classes. Bootstrap 4 card classes replaced the old panels, walls, and thumbnails of bootstrap.