Bootstrap 5 Modal Live demo

Bootstrap 5 Modal live demo demonstrates the toggle of a working modal by clicking a button that opens a modal. The modal content slides down but fades in from the top after the toggle action. Different components are assembled together to create a Modal. Modals can be triggered using the data attributes or JavaScript.

Bootstrap 5 Modal Live demo class: There are no specific classes for a live demo, a combination of modal classes is used along with the modal class.

Bootstrap 5 Offcanvas Modal Demo Attribute:

• data-bs-target: It accepts a CSS selector to apply javascript to hide or show MoDAL.

Syntax:

<div class="modal">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <h5 class="modal-title">
 <!-- Modal title --!>
 </h5>
 </div>
 <div class="modal-body">
 <!-- Modal body--!>
 </div>
 </div>
 </div>
</div>

Example 1: The code below demonstrates a live Demo of a basic modal with a grid.

Output:

Example 2: The code below demonstrates a Live Demo of a modal with dynamic heights using jQuery.

Output:

Reference: https://getbootstrap.com/docs/5.0/components/modal/#live-demo