Bootstrap 5 Cards Masonry is a grid layout that uses space optimization and displays cards in the most space-efficient way and also looks beautiful. Mansory is not included with bootstrap so we have to include the Mansory javascript plugin in our document using the CDN link provided below.
Bootstrap 5 Cards Masonry Attributes:
- data-mansory: This attribute is used to define the Masonry options. Here we will set it to {"percentPosition": true }.
Masonry CDN Link:
<script src="https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js" async>
</script>
Syntax:
<div data-masonry='{"percentPosition": true }'>
<div class="col">
...
</div>
</div>
Example 1: This example illustrates how to create a card Mansory having two columns.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>GeeksforGeeks - Bootstrap 5</title>
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"/>
<!-- Mansory JS -->
<script src=
"https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js" async>
</script>
</head>
<body>
<div class="container">
<div class="mt-5 mb-4">
<h1 class="text-success">
GeeksforGeeks
</h1>
<strong>
Bootstrap 5 Cards Mansory
</strong>
</div>
<div class="row mb-5"
data-masonry='{"percentPosition": true }'>
<div class="col-6">
<div class="card">
<div class="card-body">
GeeksforGeeks is a computer science portal
for geeks. It offers courses in various
computer science subjects like Data Structures
and Algorithms, Database Management Systems, etc.
</div>
</div>
<div class="card mt-4">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20221204185234/download.png"
class="card-img-top" />
<div class="card-body">
This is a card with the image on the top
</div>
</div>
</div>
<div class="col-6">
<div class="card">
<div class="card-body">
<p>Click the button below to explore the courses.</p>
<a href="https://www.geeksforgeeks.org/courses"
class="btn btn-success">
Explore
</a>
</div>
</div>
<div class="card border-success mt-4">
<div class="card-body">
<p>GeeksforGeeks was founded by Sandeep
Jain in 2009 as he wanter to provide
computer science students a portal where
they can gain knowledge and prepare for big
tech interviews.
</p>
<a href="https://www.geeksforgeeks.org/courses"
class="btn btn-success">
Explore courses
</a>
</div>
</div>
<div class="card mt-4">
<div class="card-body">
<figure>
<blockquote class="blockquote">
<p>
The more you know, the more you
realize you know nothing.
</p>
</blockquote>
<figcaption class="blockquote-footer">
Socrates
</figcaption>
</figure>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Output:
Example 2: In this example, we created the cards Mansory having three columns of equal width.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>GeeksforGeeks - Bootstrap 5</title>
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" />
<!-- Mansory JS -->
<script src=
"https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js" async>
</script>
</head>
<body>
<div class="container">
<div class="mt-5 mb-4">
<h1 class="text-success">
GeeksforGeeks
</h1>
<strong>Bootstrap 5 Cards Mansory</strong>
</div>
<div class="row mb-5"
data-masonry='{"percentPosition": true }'>
<div class="col-4">
<div class="card">
<div class="card-body">
<figure>
<blockquote class="blockquote">
<p>
The more you know, the more
you realize you know nothing.
</p>
</blockquote>
<figcaption class="blockquote-footer">
Socrates
</figcaption>
</figure>
</div>
</div>
<div class="card mt-4 text-bg-danger">
<div class="card-body">
<figure>
<blockquote class="blockquote">
<p>
If people never did silly things,
nothing intelligent would ever get
done.
</p>
</blockquote>
<figcaption class="blockquote-footer text-light">
Ludwig Wittgenstein
</figcaption>
</figure>
</div>
</div>
<div class="card mt-4">
<div class="card-header">
<h3>What GeeksforGeeks Offers?</h3>
</div>
<div class="card-body">
Free Tutorials, Millions of Articles,
Live, Online and Classroom Courses,
Frequent Coding Competitions, Webinars by
Industry Experts, Internship opportunities
and Job Opportunities.
</div>
</div>
</div>
<div class="col-4">
<div class="card">
<div class="card-body">
GeeksforGeeks is a computer science portal
for geeks. It offers courses in various
computer science subjects like Data Structures
and Algorithms, Database Management Systems, etc.
</div>
</div>
<div class="card mt-4 text-bg-success">
<div class="card-header">
<h3>Why GeeksforGeeks?</h3>
</div>
<div class="card-body">
<ul>
<li>Online Courses</li>
<li>Classroom Courses</li>
<li>Free Tutorials and Articles</li>
<li>Write Articlesand Earn</li>
<li>Internship opportunities</li>
<li>Job Portal</li>
<li>Practice Portal</li>
</ul>
</div>
</div>
<div class="card mt-4">
<div class="card-body">
<p>Click the button below to explore the courses.</p>
<a href="https://www.geeksforgeeks.org/courses"
class="btn btn-success">
Explore
</a>
</div>
</div>
</div>
<div class="col-4">
<div class="card border-success">
<div class="card-body">
<p>GeeksforGeeks was founded by Sandeep
Jain in 2009 as he wanter to provide
computer science students a portal where
they can gain knowledge and prepare for
big tech interviews.
</p>
<a href="https://www.geeksforgeeks.org/courses"
class="btn btn-success">
Explore courses
</a>
</div>
</div>
<div class="card mt-4">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20221204185234/download.png"
class="card-img-top" />
<div class="card-body">
This is a card with the image on the top
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Output:
Reference: https://getbootstrap.com/docs/5.2/components/card/#masonry