Bootstrap 5 Modal Using the Grid
Last Updated :
09 Jan, 2023
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, and Grid System being one of the main tools to create responsive layouts modals. So we can add different settings and variations of Grid System in a modal. The container-fluid class is utilized to let the grid to occupy the whole modal and use the most out of the it.
Bootstrap 5 Modal Using the grid class: There is no specific class for Modal using the grid but we create it by using 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:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link href=
rel="stylesheet">
<script src=
</script>
<script src=
</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:
Bootstrap 5 Modal Using the Grid
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:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link href=
rel="stylesheet">
<script src=
</script>
<script src=
</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=
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:
Bootstrap 5 Modal Using the Grid
Reference: https://getbootstrap.com/docs/5.0/components/modal/#using-the-grid
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...