Bootstrap 5 Grid Cards is a way to have a grid of cards put beside one another and they completely act like a grid. It is created by using the row-cols and col classes and the row-col classes are responsive, so we can specify how many cards will be there in a row in any specified screen size.
Bootstrap 5 Grid cards Classes:
- row-cols-[sm/md/lg/xl]-[0-9]: This class is used to specify the row of the card grid. In this class, the screen size is optional but the number is compulsory.
Syntax:
<div class="row row-cols-[0-9]">
<div class="col">
<div class="card">
<!-- Card Contents --!>
</div>
</div>
...
</div>
Example 1: The code below demonstrates how we can add responsive row-col classes in the card grid.
<!doctype html>
<html lang="en">
<head>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet" integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous">
</script>
</head>
<body>
<h1 class="m-4" class="text-success">
GeeksforGeeks
</h1>
<h4 class="ms-4">Bootstrap 5 Grid Cards</h4>
<div class="container m-4">
<div class="row row-cols-1 row-cols-md-2
row-cols-lg-3 g-4">
<div class="col">
<div class="card mb-3" style="max-width: 540px;">
<div class="row g-0">
<div class="col-md-6 text-center">
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
class="img-fluid rounded-start"
alt="...">
</div>
<div class="col-md-6">
<div class="card-body">
<h5 class="card-title">
Data Structures
</h5>
<p class="card-text">
A data structure is a storage that is used to store and organize data.
</p>
<p class="card-text">
<small class="text-muted">
Last updated now
</small>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card mb-3" style="max-width: 540px;">
<div class="row g-0">
<div class="col-md-6 text-center">
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
class="img-fluid rounded-start"
alt="...">
</div>
<div class="col-md-6">
<div class="card-body">
<h5 class="card-title">Algorithms</h5>
<p class="card-text">
Therefore Algorithm refers to a sequence of finite steps to solve a particular problem.
</p>
<p class="card-text">
<small class="text-muted">
Last updated now
</small>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card mb-3" style="max-width: 540px;">
<div class="row g-0">
<div class="col-md-6 text-center">
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
class="img-fluid rounded-start"
alt="...">
</div>
<div class="col-md-6">
<div class="card-body">
<h5 class="card-title">C++</h5>
<p class="card-text">
C++ is a general-purpose programming language
and is widely used nowadays for competitive programming.
</p>
<p class="card-text">
<small class="text-muted">
Last updated now
</small>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card mb-3" style="max-width:540px;">
<div class="row g-0">
<div class="col-md-6 text-center">
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
class="img-fluid rounded-start"
alt="...">
</div>
<div class="col-md-6">
<div class="card-body">
<h5 class="card-title">Java</h5>
<p class="card-text">
Java is one of the most popular and widely
used programming languages.
</p>
<p class="card-text">
<small class="text-muted">
Last updated now
</small>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card mb-3" style="max-width:540px;">
<div class="row g-0">
<div class="col-md-6 text-center">
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
class="img-fluid rounded-start" alt="...">
</div>
<div class="col-md-6">
<div class="card-body">
<h5 class="card-title">Python</h5>
<p class="card-text">
Python is a high-level, general-purpose
and a very popular programming language.</p>
<p class="card-text">
<small class="text-muted">
Last updated now
</small>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Output:
Example 2: The code below demonstrates how we can add grid cards in a modal:
<!doctype html>
<html lang="en">
<head>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet" integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous">
</script>
</head>
<body>
<h1 class="m-4" class="text-success">
GeeksforGeeks
</h1>
<h4 class="ms-4">Bootstrap 5 Grid Cards</h4>
<div class="container">
<button type="button" class="btn btn-success mt-4"
data-bs-toggle="modal" data-bs-target="#cardModal">
Launch Modal
</button>
<div class="modal fade" id="cardModal" tabindex="-1"
aria-labelledby="cardModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="cardModalLabel">
This Modal Contains a Card</h5>
<button type="button" class="btn-close"
data-bs-dismiss="modal" aria-label="Close">
</button>
</div>
<div class="modal-body">
<div class="container d-flex mt-4 p-4">
<div class="row row-cols-1 g-1">
<div class="col">
<div class="card mb-3"
style="max-width:540px;">
<div class="row g-0">
<div class="col-md-6 text-center">
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
class="img-fluid rounded-start"
alt="...">
</div>
<div class="col-md-6">
<div class="card-body">
<h5 class="card-title">
Data Structures
</h5>
<p class="card-text">
A data structure is a storage that
is used to store and organize data.
</p>
<p class="card-text">
<small class="text-muted">
Last updated now</small>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card mb-3"
style="max-width:540px;">
<div class="row g-0">
<div class="col-md-6 text-center">
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
class="img-fluid rounded-start"
alt="...">
</div>
<div class="col-md-6">
<div class="card-body">
<h5 class="card-title">
Algorithms
</h5>
<p class="card-text">
Therefore Algorithm refers to a
sequence of finite steps to solve
a particular problem.
</p>
<p class="card-text">
<small class="text-muted">
Last updated now
</small>
</p>
</div>
</div>
</div><!-- row g-0 -->
</div><!-- card mb-3-->
</div><!-- col-->
</div><! -- row -->
</div><!--container -->
<div class="modal-footer">
<button type="button"
class="btn btn-danger"
data-bs-dismiss="modal">
Ok, I Got it!
</button>
</div> <!-- modal footer div -->
</div> <!-- modal-body -->
</div><!-- modal content -->
</div> <!-- modal-dialog -->
</div> <!-- id cardModal -->
</div><!-- container -->
</body>
</html>
Output:
Reference: https://getbootstrap.com/docs/5.0/components/card/#grid-cards