Bootstrap 5 Modal Using the grid can add content which can be anything from text to images to anything we want. We can also create layouts inside a modal too, Grid System being one of the main tools for creating responsive layout modals. So we can add different settings and variations of the Grid System in a modal. The container-fluid class is utilized to let the grid occupy the whole modal and use the most out of it.
Bootstrap 5 Modal Using the grid class: There is no specific class for Modal using the grid but we create it by using a combination of modal and grid system classes. We can use all the Grid System classes non-responsive and responsive ones.
Syntax:
<div class="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">...</h5>
</div>
<div class="modal-body">
<div class="row">
<div class="col-[sm/md/lg/xl]-[1-9]">
...
</div>
<!-- More Columns and Rows --!>
</div>
</div>
</div>
</div>
</div>
Example 1: The code below demonstrates the implementation of the Stacked to horizontal in a grid inside a modal which changes when the viewport size is changed:
<!DOCTYPE html>
<html lang="en">
<head>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet">
<script src=
"https://code.jquery.com/jquery-3.5.1.min.js">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body class="m-2">
<h1 class="mt-3 text-success">
GeeksforGeeks
</h1>
<h4>Bootstrap 5 Modal Using the grid
</h4>
<div class="container">
<button type="button" class="btn btn-success mt-4"
data-bs-toggle="modal" data-bs-target="#cardModal">
Launch Modal to show grid
</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 Grid
</h5>
<button type="button" class="btn-close"
data-bs-dismiss="modal" aria-label="Close">
</button>
</div>
<div class="modal-body">
<div class="container mt-4 p-4">
<div class="row text-light mb-3">
<div class="col-lg-7 bg-success border">
col-sm-7
</div>
<div class="col-lg-5 bg-success border">
col-sm-5
</div>
</div>
<div class="row text-light">
<div class="col-lg-6 bg-secondary border">
col-sm-6</div>
<div class="col-lg-6 bg-secondary border">
col-sm-6</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Output:
Example 2: The code below demonstrates the implementation of the variable width content in a grid inside a modal which changes when the viewport size is changed:
<!DOCTYPE html>
<html lang="en">
<head>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet">
<script src=
"https://code.jquery.com/jquery-3.5.1.min.js">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<div class="m-4">
<h1 class="mt-3 text-success">
GeeksforGeeks
</h1>
<h4>Bootstrap 5 Modal Using the grid
</h4>
<button type="button"
class="btn btn-lg btn-success mt-4"
data-bs-toggle="modal"
data-bs-target="#exampleModal">
Launch Modal with grid
</button>
<div id="exampleModal" class="modal fade"
tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">
In this modal Grid System has been used
</h5>
<button type="button"
class="btn-close"
data-bs-dismiss="modal">
</button>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="row justify-content-md-center">
<div class="col col-lg-2 bg-light border">
First Column
</div>
<div class="col-lg-auto bg-light border">
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png"
alt="">
</div>
<div class="col col-lg-2 bg-light border">
Last Column
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button"
class="btn btn-danger"
data-bs-dismiss="modal">
Ok, I got it
</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Output:
Reference: https://getbootstrap.com/docs/5.0/components/modal/#using-the-grid
