Bootstrap 5 Modal Using the Grid

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:

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:

Output:

Reference: https://getbootstrap.com/docs/5.0/components/modal/#using-the-grid