How to run a bootstrap modal?

Question

Bootstrap noob here. I'm working with bootstrap 4 and an html file, and I'm not able to get a modal working. The code I'm using is literally the one on the bs4 docs regarding modals.

For some reason, the code that works in the bootstrap docs does not work for me, when I load my page and click in the modal button, nothing happens.

Here's the code I'm using, extracted from bs4 docs. I tried some other answers from SO, but didn't work for me, and I'm not sure what I might be doing wrong. Any bit of help is appreciated.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

That code looks okay, please show us your bootstrap links... sometimes you'll find that you are using bootstap files that requires other files such as popper.js instead of the bundled version. — Relcode, Jan 09 '22 at 18:58
Your code, copy-pasted, works fine, when jQuery and Bootstrap CSS and JS are included - [here's a working JSFiddle](https://jsfiddle.net/dont_panic/gknfmqpz/). Click *Resources* in the left col to see the included files. — Don't Panic, Jan 09 '22 at 22:15

score 0 · Accepted Answer · answered Jan 09 '22 at 19:01

Add the jQuery library and reference bootstrap.min.js to the project for Bootstrap Modal to work. Add the bootstrap.min.css cdn reference to the project for the bootstrap styles to be applied.

<!-- The following references have been added to the project for the Bootstrap Modal to work. -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Thanks Sercan, your solution solved the problem! I did not have the JQuery libraray added. Also I realized that I did have a template that was interfering and did not let the modal to work properly. — pgreenwood, Jan 11 '22 at 20:03

How to run a bootstrap modal?

1 Answers1