Django modal bootstrap not displaying

Question

I have been blocked on this problem for several days. I have bootstrap 3.3.7 in the project root folder. I am rendering some buttons in the django template that should open modal windows when clicked. But the modal functionality is not working. I am following the examples shown on this page: https://www.quackit.com/bootstrap/bootstrap_3/tutorial/bootstrap_modal.cfm

Here is the template code:

    <h6>
      <button type="button" class="btn btn-sm" data-toggle="modal" data-target="#smallShoes">
        DCCRP 2102
      </button>
      
      <!-- The modal -->
      <div class="modal fade" id="smallShoes" tabindex="-1" role="dialog" aria-labelledby="modalLabelSmall" aria-hidden="true">
      <div class="modal-dialog modal-sm">
      <div class="modal-content">

      <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
      </button>
      <h4 class="modal-title" id="modalLabelSmall">Modal Title</h4>
      </div>

      <div class="modal-body">
      Modal content...
      </div>

      </div>
      </div>
      </div>
    </h6>

Inside my base.html ... section, I have the following:

  {% load static %}
  <link rel="stylesheet" href="{% static '/boot/css/bootstrap.css' %}">

  <!-- Add additional CSS in static file -->
  {% load static %}
  <link rel="stylesheet" href="{% static '/custom/custom.css' %}">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

Thanks!

Answer 1

  {% load static %}
  <link rel="stylesheet" href="{% static '/boot/css/bootstrap.css' %}">

  <!-- Add additional CSS in static file -->
  {% load static %}
  <link rel="stylesheet" href="{% static '/custom/custom.css' %}">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  // add this.
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>