title: Bootstrap modal not showing up (JS file present)
body: <p>The Bootstrap JS is placed at the end of body before the main.js</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  
  &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
      &lt;title&gt;Doc&lt;/title&gt;
      &lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot;
          integrity=&quot;sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl&quot; crossorigin=&quot;anonymous&quot;&gt;
     
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div class=&quot;container&quot;&gt;
          
          &lt;div class=&quot;position-relative mt-5 &quot;&gt;
              &lt;form class=&quot;position-absolute top-0 start-50 translate-middle-x w-100&quot; id=&quot;loginForm&quot;&gt;
                  
                 
                  &lt;div class=&quot;d-grid gap-2 mt-4&quot;&gt;
                      &lt;button type=&quot;button&quot; class=&quot;btn btn-success&quot; data-toggle=&quot;modal&quot;
                          data-target=&quot;#exampleModalScrollable&quot; id=&quot;createAccountBtn&quot;&gt;Create an Account&lt;/button&gt;
                  &lt;/div&gt;
                  &lt;hr /&gt;
                  
              &lt;/form&gt;
          &lt;/div&gt;
      &lt;/div&gt;
       &lt;!-- Modal --&gt;
       &lt;div class=&quot;modal fade&quot; id=&quot;exampleModalScrollable&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot;
       aria-labelledby=&quot;exampleModalScrollableTitle&quot; aria-hidden=&quot;true&quot;&gt;
       &lt;div class=&quot;modal-dialog modal-dialog-scrollable&quot; role=&quot;document&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;exampleModalScrollableTitle&quot;&gt;Modal title&lt;/h5&gt;
                   &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot; aria-label=&quot;Close&quot;&gt;
                       &lt;span aria-hidden=&quot;true&quot;&gt;&amp;times;&lt;/span&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-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;
      &lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js&quot;
      integrity=&quot;sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0&quot;
      crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;main.js&quot;&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  <p>I want the <code>#createAccountBtn</code> to be able to toggle the modal which is placed below the container but for some reason it doesn't work. I have included the bootstrap javascript too and gone through all the related answers.</p>