Bootstrap 4 Card Layout Tutorial

In our previous tutorial we have explained different ways to create cards as an individual component. As cards is a collection of different elements, it can be used to create complete page layouts like masonry blog index pages. Bootstrap 4 offers three default CSS classes for creating page layouts with cards. In this tutorial let us explore more on creating card layouts.




Types of Card Layouts

Following are the three CSS classes used for creating layouts.

  • card-group
  • card-deck
  • card-columns

Besides these classes you can create layout by placing individual cards inside default grid layout columns.

Layout 1: Card Group Layout

The “.card-group” class is used to group individual cards into a flex box layout with equal height columns. Below is an example of three cards are grouped together using card groups.

Bootstrap Card Groups Layout

As you can see the card group will look beautiful without gap between individual cards. You can mix and match different elements inside the cards as discussed in Bootstrap 4 cards tutorial. In this example, we have used three similar cards with image, title, description and footer.

The complete code for the card group layout is given below, basically we have inserted card groups code between body of the Bootstrap 4 starter template:

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta Tags for Bootstrap 4 -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap 4 CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<!-- Start of Card Groups Layout -->
<div class="card-group">
<div class="card">
<img class="card-img-top" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Flex Card Image 1">
<div class="card-body">
<h4 class="card-title">Card Title</h4>
<p class="card-text">Here is a longer description of the card and the height will be auto aligned with flex box.</p>
</div>
<div class="card-footer">
<small class="text-muted">Here is a footer</small>
</div>
</div>
<div class="card">
<img class="card-img-top" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Flex Card Image 2">
<div class="card-body">
<h4 class="card-title">Card Title</h4>
<p class="card-text">Here is a shorter description of the card.</p>
</div>
<div class="card-footer">
<small class="text-muted">Here is a footer</small>
</div>
</div>
<div class="card">
<img class="card-img-top" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Flex Card Image 3">
<div class="card-body">
<h4 class="card-title">Card Title</h4>
<p class="card-text">Here is a very long description of the card and the height will be auto aligned with flex box. You can enter longer text to check the cards are aligned perfectly with same height without any gap.</p>
</div>
<div class="card-footer">
<small class="text-muted">Here is a footer</small>
</div>
</div>
</div>
<!-- End of Card Groups Layout -->
<!-- Bootstrap 4 Scripts -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

Layout 2: Card Deck Layout

The “.card-deck” class creates the layout similar to the card group with an exemption that there will be a marginal gap between individual cards as shown below:

Related:  How to Group Excess Pages in Weebly Navigation?

Bootstrap Card Deck Layout

Card deck layout also uses flex box to have equal height columns within a container regardless of the content size of individual cards.

Offer: Get 92% discount of Mobirise Bootstrap site builder.

Below is the complete code for creating a card deck layout.

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta Tags for Bootstrap 4 -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap 4 CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<!-- Start of Card Deck Layout -->
<div class="card-deck">
<div class="card">
<img class="card-img-top" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card Title</h4>
<p class="card-text">Here is a longer description of the card and the height will be auto aligned with flex box.</p>
</div>
<div class="card-footer">
<small class="text-muted">Here is a footer</small>
</div>
</div>
<div class="card">
<img class="card-img-top" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card Title</h4>
<p class="card-text">Here is a shorter description of the card.</p>
</div>
<div class="card-footer">
<small class="text-muted">Here is a footer</small>
</div>
</div>
<div class="card">
<img class="card-img-top" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card Title</h4>
<p class="card-text">Here is a very long description of the card and the height will be auto aligned with flex box. You can enter longer text to check the cards are aligned perfectly with same height without any gap.</p>
</div>
<div class="card-footer">
<small class="text-muted">Here is a footer</small>
</div>
</div>
</div>
<!-- End of Card Deck Layout -->
<!-- Bootstrap 4 Scripts -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

Layout 3: Card Columns Layout or Masonry Layout

Masonry layout is one of the popular ways to showcase blog index page with individual boxes are fitting into the available space. Here the height of individual card will be different based on the actual size of the card. Below is how the masonry layout will look like using “.card-columns” class.

Bootstrap Masonry Layout with Card Columns

The complete code for the above masonry layout is given below:

Related:  How to Submit WordPress Sitemap to Baidu?

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta Tags for Bootstrap 4 -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap 4 CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<!-- Start of Card Columns Layout -->
<div class="card-columns">
<div class="card">
<img class="card-img-top img-fluid" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Card Columns 1">
<div class="card-body">
<h4 class="card-title">Card Title</h4>
<p class="card-text">Here is a very long description of the card and you can enter longer text to check the cards are aligned perfectly like on the masonry layout.</p>
</div>
</div>
<div class="card">
<img class="card-img-top img-fluid" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Card Columns 2">
<div class="card-body">
<h4 class="card-title">Card Title</h4>
<p class="card-text">Here is a shorter description of the card.</p>
<p class="card-text"><small class="text-muted">Here is a footer</small></p>
</div>
</div>
<div class="card p-3 bg-dark text-white">
<blockquote class="blockquote mb-0">
<p>This is a blockquote and you can enter any quote from anyone.</p>
<footer>
<small class="text-muted">
Said by <cite title="Source Title">Someone</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card bg-primary p-3 text-center text-white">
<blockquote class="blockquote mb-0">
<p>Here is a description for primary card.</p>
<footer>
<small>
Said by <cite title="Source Title">Someone</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card text-center">
<div class="card-body">
<h4 class="card-title">Card Title</h4>
<p>Here is a short description of the card without image.</p>
<p class="card-text"><small class="text-muted">Here is a footer</small></p>
</div>
</div>
<div class="card p-3 text-right">
<blockquote class="blockquote mb-0">
<p>Here is a short description without title and image.</p>
<footer>
<small>
Said by <cite title="Source Title">Someone</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title">Card Title</h4>
<p class="card-text">Here is a long description for your card, enter anything you would like to enter here.</p>
<p class="card-text"><small class="text-muted">Here is a footer</small></p>
</div>
</div>
<div class="card">
<img class="card-img img-fluid" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Image Only Card">
</div>
</div>
<!-- End of Card Columns Layout -->
<!-- Bootstrap 4 Scripts -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

You can add as many as elements or pull it from the blogroll to showcase it as an index page.

1. You may need to add 100% width to the images used on masonry layout like .img-fluid{width:100%;}.

2.Remember the “.p-3” class is used to add padding to the card which contains only description text to add 1rem padding.

Related:  How to Install Google Analytics in phpBB Forum?




Recommended Articles:

Leave a Comment