title: Bootstrap Modal Not Showing in Django Template
body: <p>I have spent way too much time troubleshooting this.
  Does anyone have any idea why this modal won't pop up?</p>
  <p>It seems that if I remove the table (that takes up most of the code), the modal then works fine.
  If I remove the CSS, the modal still doesnt work.</p>
  <p>Don't judge if it's horrible, only started learning Django, HTML, etc. 2 weeks ago </p>
  <pre><code>{% extends 'base.html' %}
  {% load crispy_forms_tags %}
  
  
  {% block head %}
  
      &lt;style&gt;
  
      .teacher-list {
          margin-left: 200px;
          height: 100%;
          width: 350px;
          position: fixed;
          overflow:hidden; 
          overflow-y:scroll;
          border-right: 1px solid;
          border-color: #d3d3d3;
      }
  
      .teacher-list-title {
          line-height: 1.3;
          height: 4px;
      }
  
      .teacher-list-text {
          line-height: 1.3;
          padding-bottom: 0px;
          font-weight: normal;
          height: 4px;
      }
  
      .teacher-body {
          padding-left: 570px;
          padding-top: 10px;
          text-align: center;
      }
  
      .icon-only-button {
          background: transparent;
          border: none !important;
          padding: 0 0 0 0;
      }
  
      .search input {
          padding-left: 10px;
          height: 30px;
          width: 220px;
          border: none;
      }
  
      .line {
          margin-left: 550px;
          width: 100%;
          border-bottom: 1px solid black;
          position: absolute;
      }
  
      &lt;/style&gt;
  
  {% endblock %}
  
  {% block content %}
      &lt;div class=&quot;teacher-list&quot;&gt;
          &lt;table class=&quot;table&quot;&gt;
              &lt;tbody&gt;
                  &lt;tr class=&quot;search&quot;&gt;
                      &lt;form method=&quot;GET&quot; name=&quot;search&quot;&gt;
                          &lt;th scope=&quot;row&quot;&gt;
                              &lt;input name=&quot;search&quot; type=&quot;search&quot; placeholder=&quot;Search..&quot; value=&quot;{{ search_text }}&quot;&gt;
                          &lt;/th&gt;
                      &lt;/form&gt;
                      &lt;td&gt;
                          &lt;button type=&quot;button&quot; class=&quot;icon-only-button&quot; data-bs-toggle=&quot;modal&quot; data-bs-target=&quot;#exampleModal&quot;&gt;
                              &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;25&quot; height=&quot;25&quot; fill=&quot;currentColor&quot; class=&quot;bi bi-plus-lg&quot; viewBox=&quot;0 0 16 16&quot;&gt;&lt;path d=&quot;M8 0a1 1 0 0 1 1 1v6h6a1 1 0 1 1 0 2H9v6a1 1 0 1 1-2 0V9H1a1 1 0 0 1 0-2h6V1a1 1 0 0 1 1-1z&quot;/&gt;&lt;/svg&gt;
                          &lt;/button&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
                  {% for instance in teachers %}
                      &lt;tr&gt;
                          &lt;th scope=&quot;row&quot;&gt;
                              &lt;p class=&quot;teacher-list-title&quot;&gt;{{ instance.fullname }}&lt;/p&gt;
                              &lt;p class=&quot;teacher-list-text&quot;&gt;{{ instance.school }}&lt;/p&gt;
                          &lt;/th&gt;
                          &lt;td&gt;
                              &lt;form method=&quot;GET&quot; class=&quot;form-group&quot; name=&quot;select_teacher&quot;&gt;
                                  &lt;button class=&quot;icon-only-button&quot; type=&quot;submit&quot; name=&quot;select_teacher&quot; value=&quot;{{ instance.pk }}&quot;&gt;
                                      &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;30&quot; height=&quot;30&quot; fill=&quot;currentColor&quot; class=&quot;bi bi-arrow-right-short&quot; viewBox=&quot;0 0 16 16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z&quot;/&gt;&lt;/svg&gt;
                                  &lt;/button&gt;
                              &lt;/form&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                  {% endfor %}
              &lt;/tbody&gt;
          &lt;/table&gt;
      &lt;/div&gt;
      {% if selected_teacher != &quot;&quot; %}
      &lt;div class=&quot;teacher-body&quot;&gt;
          &lt;h1&gt;{{ selected_teacher.fullname }}&lt;/h1&gt;
          &lt;form method=&quot;POST&quot; class=&quot;form-group&quot; name=&quot;delete_teacher&quot;&gt;
              {% csrf_token %}
              &lt;button onclick=&quot;return confirm('Are you sure you want to delete {{ selected_teacher.fullname }}?');&quot; class=&quot;icon-only-button&quot; type=&quot;submit&quot; name=&quot;delete_teacher&quot; value=&quot;{{ selected_teacher.pk }}&quot;&gt;
                  &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;25&quot; height=&quot;25&quot; fill=&quot;currentColor&quot; class=&quot;bi bi-trash&quot; viewBox=&quot;0 0 16 16&quot;&gt;&lt;path d=&quot;M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z&quot;/&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z&quot;/&gt;&lt;/svg&gt;
              &lt;/button&gt;
          &lt;/form&gt;
      &lt;/div&gt;
      &lt;div class=&quot;line&quot;&gt;&lt;/div&gt;
      &lt;div class=&quot;teacher-body&quot;&gt;
          &lt;form method=&quot;POST&quot; class=&quot;form-group&quot; name=&quot;new_teacher&quot;&gt;
              {% csrf_token %}
              {{ form|crispy }}
              &lt;button type=&quot;submit&quot; name=&quot;new_teacher&quot; class=&quot;btn btn-success&quot;&gt;Create&lt;/button&gt;
          &lt;/form&gt;
      &lt;/div&gt;
      {% endif %}
  
  &lt;!-- Modal --&gt;
  &lt;div class=&quot;modal fade&quot; id=&quot;exampleModal&quot; tabindex=&quot;-1&quot; aria-labelledby=&quot;exampleModalLabel&quot; aria-hidden=&quot;true&quot;&gt;
    &lt;div class=&quot;modal-dialog&quot;&gt;
      &lt;div class=&quot;modal-content&quot;&gt;
        &lt;div class=&quot;modal-header&quot;&gt;
          &lt;h5 class=&quot;modal-title&quot; id=&quot;exampleModalLabel&quot;&gt;Modal title&lt;/h5&gt;
          &lt;button type=&quot;button&quot; class=&quot;btn-close&quot; data-bs-dismiss=&quot;modal&quot; aria-label=&quot;Close&quot;&gt;&lt;/button&gt;
        &lt;/div&gt;
        &lt;div class=&quot;modal-body&quot;&gt;
          ...
        &lt;/div&gt;
        &lt;div class=&quot;modal-footer&quot;&gt;
          &lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot; data-bs-dismiss=&quot;modal&quot;&gt;Close&lt;/button&gt;
          &lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot;&gt;Save changes&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  {% endblock %}
  </code></pre>
  <p>Bootstrap injection:</p>
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
      {% block head %}
      {% endblock %}
  
      &lt;style type=&quot;text/css&quot;&gt;
  
      .content {
          padding-left: 220px;
          padding-top: 10px;
      }
  
      .btn, btn-success {
          background-color: #3c89d0 !important;
          border-color: #1184e8 !important;
      }
  
      &lt;/style&gt;
  
      &lt;meta charset=&quot;utf-8&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1, shrink-to-fit=no&quot;&gt;
  
      &lt;link rel=&quot;stylesheet&quot; href=&quot;https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css&quot; integrity=&quot;sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T&quot; crossorigin=&quot;anonymous&quot;&gt;    &lt;title&gt;CT Behaviour Management&lt;/title&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
      {% include 'nav.html' %}
  
      {% block content %}
      {% endblock %}
  
      &lt;script src=&quot;https://code.jquery.com/jquery-3.3.1.slim.min.js&quot; integrity=&quot;sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js&quot; integrity=&quot;sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js&quot; integrity=&quot;sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>