Bootstrap 5 Varying Modal Content

Bootstrap 5 Modal Content can be varied by passing the value which needed to be accessed in the modal to a data-bs-* (where * can be anything you like) attribute of the triggering button. The value passes to the modal can be accessed using JavaScript and can be used in the modal content. 

Bootstrap 5 Modal Content Classes: There are no specific classes for varying modal content. We just use a data-bs-* attribute to pass the variable value.

Bootstrap 5 Varying modal content Attribute:

• data-bs-*: It is used to vary the contents of the modal depending on which button was clicked. 

The * can be replaceable by target and toggle.

Syntax:

<div class="modal" id="mymodal">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <h3 class="modal-title">...</h3>
 </div>
 <div class="modal-body">
 ...
 </div>
 </div>
 </div>
</div>

Example 1: In this example, we pass the value for the header of the modal so when the modal is opened using different buttons it has different headings.

Output:

Example 2: We can also use more than one data-bs-* attributes to pass more than one varying content to the modal. The example below illustrates the same. We are passing the modal heading, content, and footer using the attributes on the triggering button.

Output:

Reference: https://getbootstrap.com/docs/5.2/components/modal/#varying-modal-content