Sure! Here's a comprehensive overview of Bootstrap 5 Modal — a powerful and flexible popup dialog component.

? Bootstrap 5 Modal

Modals are dialog boxes/pop-ups used to display content without navigating away from the current page. They are perfect for alerts, forms, images, etc.

1. Basic Modal Structure

<!-- Button trigger modal --><button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">  Launch demo modal</button><!-- Modal --><div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">  <div class="modal-dialog">    <div class="modal-content">            <div class="modal-header">        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>      </div>            <div class="modal-body">        This is the modal body content.      </div>            <div class="modal-footer">        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>        <button type="button" class="btn btn-primary">Save changes</button>      </div>          </div>  </div></div>

2. Explanation:

• Trigger Button
  Uses data-bs-toggle="modal" and data-bs-target="#exampleModal" to open the modal.

• Modal Wrapper
  .modal.fade with id="exampleModal" to match the trigger’s target.

• Modal Dialog
  .modal-dialog — the modal container.

• Modal Content
  .modal-content — modal’s inner content container.

• Modal Header
  Contains title and close button (btn-close).

• Modal Body
  Main content area.

• Modal Footer
  Usually contains action buttons like Close and Save.

3. Modal Sizes

Add size classes to .modal-dialog:

• Small modal: .modal-sm

• Large modal: .modal-lg

• Extra large modal: .modal-xl

Example:

<div class="modal-dialog modal-lg">  ...</div>

4. Vertically Centered Modal

Add .modal-dialog-centered:

<div class="modal-dialog modal-dialog-centered">  ...</div>

5. Scrollable Modal Body

Add .modal-dialog-scrollable to .modal-dialog for a scrollable modal body:

<div class="modal-dialog modal-dialog-scrollable">  ...</div>

6. Modal with Static Backdrop (Prevent Closing on Click Outside)

Add data-bs-backdrop="static" and data-bs-keyboard="false" on the modal div:

<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">  ...</div>

7. Programmatic Control with JavaScript

Open or close modals using JS API:

var myModal = new bootstrap.Modal(document.getElementById('exampleModal'));myModal.show();  // Show modalmyModal.hide();  // Hide modal

Summary Table of Key Classes/Attributes

If you want a live example with forms inside modal or how to trigger modals dynamically, just let me know!