Bootstrap 5 Toggle Between Modals

Bootstrap 5 Toggle Between Modals is used to switch between modals, this does not mean there can be multiple opened modals, only one modal at a time can be opened, by using this feature we can trigger the other modal that will replace the current modal content with the new ones.

Bootstrap 5 Toggle between modals Attributes:

• data-bs-target: This attribute is added to the button in the modal which will hold the target modal to be toggled.
• data-bs-toggle: This attribute is added to the button in the modal which will specify which type of toggling to be done by the button.

Syntax:

<div class="modal" id="exampleModalToggle">
 <div class="modal-dialog">
 ....
 </div>
</div>
<div class="modal" id="exampleModalToggle2">
 <div class="modal-dialog">
 ...
 </div>
</div>

Example 1: The code below demonstrates how we can make a login and reset password modal and toggle between them.

Output:

Example 2: The code below demonstrates how we can vertically scroll modals and toggle between them.

Output:

Reference: https://getbootstrap.com/docs/5.0/components/modal/#toggle-between-modals