Bootstrap 5 Modal Via data attributes

Bootstrap 5 Modal Via data attributes can activate a modal, by setting data-bs-toggle="modal" on an element, like a button. We can also toggle a specific modal by using a data-bs-target="#foo" or href="#foo".

Bootstrap 5 Modal Via data attributes:

• data-bs-toggle="modal": To tell the button, that we will be toggling a modal on clicking the element
• data-bs-target="#id": To tell the button, what is the id of the modal that needs to be toggled

Syntax:

<button type="button" data-bs-toggle="..." 
 data-bs-target="...">
 ...
</button>

Example 1: In this example, we will learn how to activate a modal using <button>

Output:

👁 Image

Example 2: In this example, we will learn how to activate a modal using <a> tag

Output:

👁 Image

References: https://getbootstrap.com/docs/5.0/components/modal/#via-data-attributes