Bootstrap 5 Cards layout facilitates a variety of classes to be used for styling the content within the cards component, although, there are no responsive layout options available yet in Bootstrap. There are 3 components that help to define the Card layout, which are described below:
- Card groups: This component will help to render the cards as a single element with equal width and height columns. They use display: flex. While we use footer content in the card layout, will automatically line up.
- Grid cards: A Bootstrap grid system is used to display how many cards are visible on the viewport. The .row-cols-1 is used to display cards in one row and .row-cols-md-2 split four cards across multiple rows, from the medium breakpoint up.
- Masonry: In v4 of bootstrap we tried to mimic masonry but it had a lot of side effects so masonry is not included in bootstrap. If we want to use a masonry layout, we can use a masonry plugin which is not included in bootstrap.
Syntax:
<div class="card-group">
<div class="card">
<img src="..."
class="card-img-top"
alt="...">
<div class="card-body">
<h5 class="card-title">
...
</h5>
<p class="card-text">
...
</p>
</div>
<div class="card-footer">
<small class="text-muted">
...
</small>
</div>
</div>Example 1: This example describes the basic usage of the Bootstrap 5 Cards layout by specifying the different Card groups.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet">
</head>
<body>
<div class="text-center">
<h1 class="text-success">
GeeksforGeeks
</h1>
<h2>Bootstrap 5 Cards layout</h2>
</div>
<div class="card-group">
<div class="card">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20221222121543/human.jpg"
class="card-img-top h-25"
alt="gfg_img">
<div class="card-body">
<h5 class="card-title">
User 1
</h5>
<p class="card-text">
Skills : JavaScript - It is the world’s
most popular lightweight, interpreted
compiled programming language. It is
also known as a scripting language for
web pages.
</p>
<p class="card-text">
<small class="text-muted">
Last updated 10 mins ago
</small>
</p>
</div>
</div>
<div class="card">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20221222121543/human.jpg"
class="card-img-top h-25"
alt="gfg_img">
<div class="card-body">
<h5 class="card-title">
User 2
</h5>
<p class="card-text">
Skills : DSA - The term DSA stands for
Data Structures and Algorithms. As the
name itself suggests it is a combination
of two separate yet interrelated topics
– Data Structure and Algorithms.
</p>
</div>
<div class="card-footer">
<small class="text-muted">
Last updated 5 mins ago
</small>
</div>
</div>
</div>
</body>
</html>
Output:
Example 2: In this example, the .row-cols-2 class lays out the cards on two-column, and the .row-cols-md-2 class splits 4 cards to equal width across multiple rows is shown.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width,initial-scale=1.0">
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet">
</head>
<body>
<div class="text-center">
<h1 class="text-success">
GeeksforGeeks
</h1>
<h2>Bootstrap 5 Cards layout</h2>
</div>
<br><br>
<div class="row row-cols-2 row-cols-md-2">
<div class="col">
<div class="card">
<div class="card-body">
<h5 class="card-title">
C++
</h5>
<p class="card-text">
C++ is widely used nowadays for
competitive programming.
</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-body">
<h5 class="card-title">
Java
</h5>
<p class="card-text">
Java has been one of the most popular
programming languages for many years.
</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-body">
<h5 class="card-title">
Python
</h5>
<p class="card-text">
Python is most widely used multi-purpose,
high-level programming language.
</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-body">
<h5 class="card-title">
Javascript
</h5>
<p class="card-text">
Javascript can be used for Client-side as
well as Server-side developments.
</p>
</div>
</div>
</div>
</div>
</body>
</html>
Output:
Reference: https://getbootstrap.com/docs/5.0/components/card/#card-layout