How to add Close Button to Bootstrap Modal ?

To add a close button to a Bootstrap modal, you can include a button element inside the modal header with the appropriate Bootstrap classes.

Adding a close button to a Bootstrap modal allows users to easily dismiss the modal window without any additional actions. This enhances the user experience by providing a clear and intuitive way to close the modal.

Syntax:

<div class="modal-header">
  <h5 class="modal-title">Modal Title</h5>
  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>

Explanation: Within the modal header (<div class="modal-header">), insert a button element (<button>) with the classes btn-close and data-bs-dismiss="modal". The btn-close class applies the default close button styling provided by Bootstrap, while the data-bs-dismiss="modal" attribute ensures that clicking the button dismisses the modal. Additionally, the aria-label="Close" attribute provides accessibility by describing the purpose of the button.

Note: This close button will be displayed in the top-right corner of the modal header, allowing users to easily close the modal window when clicked.