Problems with Bootstrap’s modals not displaying can be caused by a number of reasons. Here we discuss two of the most common causes and how to address them.
The first cause may be a conflict with smooth scrolling JavaScript. To check this, temporarily disable smooth scrolling JavaScript and see if the modal is displayed in that state.
The second cause is that the a tag is treated as an inline element and only responds to a smaller area than the expected clickable area. To solve this, you can change the a tag to an inline block element or a block element by applying display: inline-block; ordisplay: block; to the tag in CSS.