title: Why is my modal not showing? Bootstrap 4
body: <pre><code>    &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      {% load staticfiles %}
      &lt;link rel='stylesheet' href="{% static 'homepage/css/bootstrap.min.css' %}"&gt;
      &lt;link rel='stylesheet' href="{% static 'homepage/css/element.css' %}"&gt;
      &lt;link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet"&gt;
  
      &lt;style type="text/css"&gt;
          html,
          body {
              height:100%;
              font-family: 'Comfortaa', cursive;
              padding-top: 100px;
          }
          header {
              font-family: 'Comfortaa', cursive;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;header&gt;
      &lt;nav class="navbar navbar-expand-lg navbar-inverse fixed-top" id="mainNav"&gt;
          &lt;div class="container-fluid"&gt;
              &lt;a class="navbar-brand logo" href="{% url 'index' %}"&gt;&lt;img class="logo img" src="{% static 'homepage/img/leaves.png' %}"&gt;NAME&lt;/a&gt;
              &lt;div class="collapse navbar-collapse" id="mainNav"&gt;
                  &lt;ul class="navbar-nav ml-auto"&gt;
                      &lt;li class="nav-item"&gt;
                        &lt;a class="nav-link" href="{% url 'product_page' %}"&gt;ProductName`&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;p class="navbar-btn"&gt;
                              &lt;a data-toggle="modal" href="#" data-target="#newsletterModal" class="btn btn-default"&gt;Newsletter&lt;/a&gt;
                          &lt;/p&gt;
                      &lt;/li&gt;
                      &lt;li class="nav-item"&gt;
                          &lt;a class="nav-link js-scroll-trigger" href="{% url 'store' %}"&gt;Store&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li class="nav-item"&gt;
                          &lt;a class="nav-link js-scroll-trigger" href="{% url 'login' %}"&gt;Log In&lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/nav&gt;
      &lt;div class="modal fade" id="newsletterModal" tabindex="-1" role="dialog" aria-labelledby="newsletterModal" aria-hidden="true"&gt;
          &lt;div class="modal-dialog"&gt;
              &lt;div class="modal-content"&gt;
                  &lt;div class="modal-header"&gt;
                      &lt;button type="button" class="close" data-dismiss="modal"&gt; &amp;times;&lt;/button&gt;
                      &lt;h4&gt;Sign Up For Our Newsletter!&lt;/h4&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;div&gt;
  &lt;/header&gt;
  
  {% block content %}
  {% endblock %}
  </code></pre>
  
  <p>I am trying to launch a modal when the newsletter button is clicked in the navbar but the modal is not showing. I followed some other stack overflow posts and tried to put the modal div outside the navbar among other tricks but nothing seems to be working. Any suggestions?</p>
  
  <p>Any other suggestions with my code would also be appreciated. Thanks!</p>