In our previous tutorial we have explained different ways to create cards as an individual component. As cards is a collection of different elements, you can use them to create complete page layouts like masonry blog index pages. Bootstrap 5 offers three default CSS classes for creating page layouts with cards. In this tutorial let us explore more on creating card layouts.
You can download example layout codes used in this tutorial here.
Types of Card Layouts
Bootstrap uses the following three CSS classes for creating card 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
You can usetThe “.card-group” class to group individual cards into a flex box layout with equal height columns. Below is an example grouping three cards as a layout together using card groups.
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 cards tutorial. In this example, we have used three similar cards with image, title, description and footer. Below is the complete code for the card group layout, basically we have inserted card groups code between body of the Bootstrap starter template:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta Tags for Bootstrap 5 -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" 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 5 Scripts -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" 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:
Card deck layout also uses flex box to have equal height columns within a container regardless of the content size of individual cards.
Below is the complete code for creating a card deck layout.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta Tags for Bootstrap 5 -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" 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 5 Scripts -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" 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.
The complete code for the above masonry layout is given below:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta Tags for Bootstrap 5 -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" 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 5 Scripts -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" 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.
Points to Note:
- You may need to add 100% width to the images used on masonry layout like .img-fluid{width:100%;}.
- Remember the “.p-3” class is used to add padding to the card which contains only description text to add 1rem padding.
- Card layouts are not responsive on mobile devices with the initial Bootstrap 5 release.
Leave a Reply
Your email is safe with us.