In Bootstrap 5, the Modal component is used to create pop-up modal dialogs that overlay the current page content. Modals are often used to display additional information, prompt for user input, or confirm actions. Here’s how you can use the Modal component in Bootstrap 5:
<!-- Button to trigger the modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Open 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">
<p>Modal content goes here.</p>
</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>In this example, a button is used to trigger the modal. The button has data-bs-toggle="modal" and data-bs-target="#exampleModal" attributes, which indicate that it should open the modal with the ID “exampleModal” when clicked.
The modal itself is contained within a <div> element with the class “modal fade” and the corresponding ID. Inside the modal, you can customize the header, body, and footer sections according to your needs.
The header section contains a title and a close button, specified by the modal-header class. The body section contains the main content of the modal, specified by the modal-body class. The footer section contains buttons for actions, specified by the modal-footer class.
To close the modal, you can either click the close button in the header or footer, or use the data-bs-dismiss="modal" attribute on a button.
You can further customize the Modal component by adding additional options, such as different sizes, animation effects, and more.
Feel free to use the Modal component to create pop-up dialogs or prompts in your Bootstrap 5 project. For more details and additional options related to the Modal component, refer to the official Bootstrap documentation.