Bootstrap modal appearing under background

Question

I have used the code for my modal straight from the Bootstrap example, and have included only the bootstrap.js (and not bootstrap-modal.js). However, my modal is appearing u

Answer 1

The easiest solution I found, that worked for all my cases, was an answer in a similar post:

Here it is:

.modal {
  background: rgba(0, 0, 0, 0.5); 
}
.modal-backdrop {
  display: none;
}

Basically, the original backdrop is not used. Instead you use the modal as the backdrop. The result is that it looks and behaves exactly as the original should've. It avoids all the issues with z-indexes (for me changing z-index to 0 solved the issue, but created a new problem with my nav menu being between the modal and backdrop) and is simple.

Credit goes to @Jevin O. Sewaruth for posting the original answer.