title: popup contact or modal form freezes, django + twitter bootstrap + bootsnipp
body: <p>I'm quite new to django and web programming in general. I want to build a small website example. I use django allauth and twitter bootstrap. However, I wanted to build a popup sign in, register window, which I couldn't find in twitter bootsrap examples. So I took a snippet from <a href="http://bootsnipp.com/snippets/featured/contact-and-vote-modal" rel="nofollow">bootsnipp</a>, because it works exactly as I want: popups over other forms, while fading them, so I thought with a little tuning it will work for me. However, if I place the code inside of the body or footer, it works. If I try to add it to a navbar, provided by twitter bootstrap it simply freezes. Could someone help, please? I have absolutely no idea why it happens.. </p>
  
  <p>Here is the working code with Contact button beeing placed in footer and body elements( Contact Button 2,3,4). However, when I try to put the following code after the comment "Contact Button 1", it shows the popup and freezes:</p>
  
  <pre><code>&lt;a class="btn btn-primary btn-lg" data-toggle="modal" data-target="#contact" data-original-title&gt;Contact&lt;/a&gt;
          &lt;div class="modal fade" id="contact" tabindex="-1" role="dialog" aria-labelledby="contactLabel"
               aria-hidden="true"&gt;
              &lt;div class="modal-dialog"&gt;
                  &lt;div class="panel panel-primary"&gt;
                      &lt;div class="panel-heading"&gt;
                          &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;×&lt;/button&gt;
                          &lt;h4 class="panel-title" id="contactLabel"&gt;&lt;span
                                  class="glyphicon glyphicon-info-sign"&gt;&lt;/span&gt; Any questions? Feel free to contact
                              us.&lt;/h4&gt;
                      &lt;/div&gt;
                      &lt;form action="#" method="post" accept-charset="utf-8"&gt;
                          &lt;div class="modal-body" style="padding: 5px;"&gt;
                              &lt;div class="row"&gt;
                                  &lt;div class="col-lg-6 col-md-6 col-sm-6" style="padding-bottom: 10px;"&gt;
                                      &lt;input class="form-control" name="firstname" placeholder="Firstname" type="text"
                                             required autofocus/&gt;
                                  &lt;/div&gt;
                                  &lt;div class="col-lg-6 col-md-6 col-sm-6" style="padding-bottom: 10px;"&gt;
                                      &lt;input class="form-control" name="lastname" placeholder="Lastname" type="text"
                                             required/&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;div class="row"&gt;
                                  &lt;div class="col-lg-12 col-md-12 col-sm-12" style="padding-bottom: 10px;"&gt;
                                      &lt;input class="form-control" name="email" placeholder="E-mail" type="text"
                                             required/&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;div class="row"&gt;
                                  &lt;div class="col-lg-12 col-md-12 col-sm-12" style="padding-bottom: 10px;"&gt;
                                      &lt;input class="form-control" name="subject" placeholder="Subject" type="text"
                                             required/&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;div class="row"&gt;
                                  &lt;div class="col-lg-12 col-md-12 col-sm-12"&gt;
                                      &lt;textarea style="resize:vertical;" class="form-control" placeholder="Message..."
                                                rows="6" name="comment" required&gt;&lt;/textarea&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="panel-footer" style="margin-bottom:-14px;"&gt;
                              &lt;input type="submit" class="btn btn-success" value="Send"/&gt;
                              &lt;!--&lt;span class="glyphicon glyphicon-ok"&gt;&lt;/span&gt;--&gt;
                              &lt;input type="reset" class="btn btn-danger" value="Clear"/&gt;
                              &lt;!--&lt;span class="glyphicon glyphicon-remove"&gt;&lt;/span&gt;--&gt;
                              &lt;button style="float: right;" type="button" class="btn btn-default btn-close"
                                      data-dismiss="modal"&gt;Close
                              &lt;/button&gt;
                          &lt;/div&gt;
                      &lt;/form&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>The original base.html:</p>
  
  <pre><code>{% load url from future %}
  {% load staticfiles %}
  
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  {% block headbootstrap %}
  &lt;style type="text/css"&gt;
      body {
          padding-top: 60px;
          padding-bottom: 40px;
      }
  &lt;/style&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  
    &lt;!-- Basic css --&gt;
  &lt;link href="{{ STATIC_URL }}twitter_bootstrap/dist/css/bootstrap.css" rel="stylesheet"&gt;
  &lt;link href="{{ STATIC_URL }}accesss/footer.css" rel="stylesheet"&gt;
  {% endblock %}
  &lt;title&gt;{% block head_title %}{% endblock %}&lt;/title&gt;
  {% block extra_head %}
  {% endblock %}
  &lt;/head&gt;
  &lt;body&gt;
  {% block header %}
  &lt;div class="navbar navbar-fixed-top navbar-inverse" role="navigation"&gt;
    &lt;div class="container"&gt;
      &lt;div class="navbar-header"&gt;
          &lt;!-- Mobile Nav Button --&gt;
          &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"&gt;
              &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;/button&gt;
          &lt;!-- END Mobile Nav Button --&gt;
          &lt;a class="navbar-brand" href="#"&gt;HUMAN&lt;/a&gt;
      &lt;/div&gt;
      &lt;!-- Navigation Links --&gt;
      &lt;div class="collapse navbar-collapse"&gt;
          {% if request.user.is_authenticated %}
          &lt;ul class="nav navbar-nav"&gt;
              &lt;li class="active"&gt;&lt;a href="#"&gt;Dashboard&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#News"&gt;News&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#Data"&gt;Data&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
          {% else %}
          &lt;ul class="nav navbar-nav"&gt;
              &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#News"&gt;News&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#Feedback"&gt;Feedback&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#howitworks"&gt;How it works&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
          {% endif %}
          &lt;!-- END Navigation Links --&gt;
  
          &lt;!-- Contact Button 1 --&gt;
  
          &lt;!-- I want to add a button here --&gt;
  
          &lt;!-- Login &amp; Logout buttons --&gt;
          &lt;form class="navbar-form navbar-right" role="form" method="post" action="{% url 'account_login' %}"&gt;
              {% csrf_token %}
              {{ form.non_field_errors }}
              {% if request.user.is_authenticated %}
              &lt;a class="btn btn-success" type="submit" href="/accounts/logout/"&gt;Logout&lt;/a&gt;
              &lt;!---       &lt;img class="pull-right" src="{{ request.user.profile.profile_image_url }}"/&gt; ---&gt;
  
              {% if request.user.first_name or request.user.last_name %}
              {{ request.user.first_name }} {{ request.user.last_name }}
              {% else %}
              {{ request.user.username }}
              {% endif %}
              {% if request.user.profile.account_verified %} (verified) {% else %} (unverified) {% endif %}
  
              {% else %}
              &lt;a class="btn btn-success" type="submit" href="/accounts/login/"&gt;Login&lt;/a&gt;
              {% endif %}
              {% if redirect_field_value %}
              &lt;input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}"/&gt;
              {% endif %}
          &lt;/form&gt;
  
  
      &lt;/div&gt;
      &lt;!-- /.nav-collapse --&gt;
  &lt;/div&gt;
  &lt;!-- /.container --&gt;
  &lt;/div&gt;
  &lt;!-- /.navbar --&gt;
  {% endblock %}
  
  {% block content %}
  {% if request.user.is_authenticated %}
  {% else %}
  &lt;!-- Contact Button 2 --&gt;
  &lt;div class="container"&gt;
  &lt;div class="row"&gt;
      &lt;br/&gt;&lt;br/&gt;&lt;br/&gt;
  
      &lt;a class="btn btn-primary btn-lg" data-toggle="modal" data-target="#contact" data-original-title&gt;
          Contact
      &lt;/a&gt;
  
      &lt;div class="modal fade" id="contact" tabindex="-1" role="dialog" aria-labelledby="contactLabel"
           aria-hidden="true"&gt;
          &lt;div class="modal-dialog"&gt;
              &lt;div class="panel panel-primary"&gt;
                  &lt;div class="panel-heading"&gt;
                      &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;×&lt;/button&gt;
                      &lt;h4 class="panel-title" id="contactLabel"&gt;&lt;span class="glyphicon glyphicon-info-sign"&gt;&lt;/span&gt;
                          Any questions? Feel free to contact us.&lt;/h4&gt;
                  &lt;/div&gt;
                  &lt;form action="#" method="post" accept-charset="utf-8"&gt;
                      &lt;div class="modal-body" style="padding: 5px;"&gt;
                          &lt;div class="row"&gt;
                              &lt;div class="col-lg-6 col-md-6 col-sm-6" style="padding-bottom: 10px;"&gt;
                                  &lt;input class="form-control" name="firstname" placeholder="Firstname" type="text"
                                         required autofocus/&gt;
                              &lt;/div&gt;
                              &lt;div class="col-lg-6 col-md-6 col-sm-6" style="padding-bottom: 10px;"&gt;
                                  &lt;input class="form-control" name="lastname" placeholder="Lastname" type="text"
                                         required/&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="row"&gt;
                              &lt;div class="col-lg-12 col-md-12 col-sm-12" style="padding-bottom: 10px;"&gt;
                                  &lt;input class="form-control" name="email" placeholder="E-mail" type="text" required/&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="row"&gt;
                              &lt;div class="col-lg-12 col-md-12 col-sm-12" style="padding-bottom: 10px;"&gt;
                                  &lt;input class="form-control" name="subject" placeholder="Subject" type="text"
                                         required/&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="row"&gt;
                              &lt;div class="col-lg-12 col-md-12 col-sm-12"&gt;
                                  &lt;textarea style="resize:vertical;" class="form-control" placeholder="Message..."
                                            rows="6" name="comment" required&gt;&lt;/textarea&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="panel-footer" style="margin-bottom:-14px;"&gt;
                          &lt;input type="submit" class="btn btn-success" value="Send"/&gt;
                          &lt;!--&lt;span class="glyphicon glyphicon-ok"&gt;&lt;/span&gt;--&gt;
                          &lt;input type="reset" class="btn btn-danger" value="Clear"/&gt;
                          &lt;!--&lt;span class="glyphicon glyphicon-remove"&gt;&lt;/span&gt;--&gt;
                          &lt;button style="float: right;" type="button" class="btn btn-default btn-close"
                                  data-dismiss="modal"&gt;Close
                          &lt;/button&gt;
                      &lt;/div&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  
  
  &lt;div class="container"&gt;
  
  &lt;!-- Main component for a primary marketing message or call to action --&gt;
  &lt;div class="jumbotron"&gt;
      &lt;h1&gt;News&lt;/h1&gt;
  
      &lt;p&gt;This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It
          includes the responsive CSS and HTML, so it also adapts to your viewport and device.&lt;/p&gt;
  
      &lt;p&gt;To see the difference between static and fixed top navbars, just scroll.&lt;/p&gt;
  
      &lt;p&gt;
          &lt;a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button"&gt;View navbar docs &amp;raquo;&lt;/a&gt;
      &lt;/p&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- /container --&gt;
  
  &lt;div class="container"&gt;
  
  &lt;!-- Main component for a primary marketing message or call to action --&gt;
  &lt;div class="jumbotron"&gt;
      &lt;h1&gt;Promote&lt;/h1&gt;
  
      &lt;p&gt;This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It
          includes the responsive CSS and HTML, so it also adapts to your viewport and device.&lt;/p&gt;
  
      &lt;p&gt;To see the difference between static and fixed top navbars, just scroll.&lt;/p&gt;
  
      &lt;p&gt;
          &lt;a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button"&gt;View navbar docs &amp;raquo;&lt;/a&gt;
      &lt;/p&gt;
      &lt;!-- Contact Button 3 --&gt;
      &lt;a class="btn btn-primary btn-lg" data-toggle="modal" data-target="#contact" data-original-title&gt;
          Contact
      &lt;/a&gt;
  
      &lt;div class="modal fade" id="contact" tabindex="-1" role="dialog" aria-labelledby="contactLabel"
           aria-hidden="true"&gt;
          &lt;div class="modal-dialog"&gt;
              &lt;div class="panel panel-primary"&gt;
                  &lt;div class="panel-heading"&gt;
                      &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;×&lt;/button&gt;
                      &lt;h4 class="panel-title" id="contactLabel"&gt;&lt;span class="glyphicon glyphicon-info-sign"&gt;&lt;/span&gt;
                          Any questions? Feel free to contact us.&lt;/h4&gt;
                  &lt;/div&gt;
                  &lt;form action="#" method="post" accept-charset="utf-8"&gt;
                      &lt;div class="modal-body" style="padding: 5px;"&gt;
                          &lt;div class="row"&gt;
                              &lt;div class="col-lg-6 col-md-6 col-sm-6" style="padding-bottom: 10px;"&gt;
                                  &lt;input class="form-control" name="firstname" placeholder="Firstname" type="text"
                                         required autofocus/&gt;
                              &lt;/div&gt;
                              &lt;div class="col-lg-6 col-md-6 col-sm-6" style="padding-bottom: 10px;"&gt;
                                  &lt;input class="form-control" name="lastname" placeholder="Lastname" type="text"
                                         required/&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="row"&gt;
                              &lt;div class="col-lg-12 col-md-12 col-sm-12" style="padding-bottom: 10px;"&gt;
                                  &lt;input class="form-control" name="email" placeholder="E-mail" type="text" required/&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="row"&gt;
                              &lt;div class="col-lg-12 col-md-12 col-sm-12" style="padding-bottom: 10px;"&gt;
                                  &lt;input class="form-control" name="subject" placeholder="Subject" type="text"
                                         required/&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="row"&gt;
                              &lt;div class="col-lg-12 col-md-12 col-sm-12"&gt;
                                  &lt;textarea style="resize:vertical;" class="form-control" placeholder="Message..."
                                            rows="6" name="comment" required&gt;&lt;/textarea&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="panel-footer" style="margin-bottom:-14px;"&gt;
                          &lt;input type="submit" class="btn btn-success" value="Send"/&gt;
                          &lt;!--&lt;span class="glyphicon glyphicon-ok"&gt;&lt;/span&gt;--&gt;
                          &lt;input type="reset" class="btn btn-danger" value="Clear"/&gt;
                          &lt;!--&lt;span class="glyphicon glyphicon-remove"&gt;&lt;/span&gt;--&gt;
                          &lt;button style="float: right;" type="button" class="btn btn-default btn-close"
                                  data-dismiss="modal"&gt;Close
                          &lt;/button&gt;
                      &lt;/div&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;!-- /container --&gt;
  &lt;div class="container"&gt;
  
  &lt;!-- Main component for a primary marketing message or call to action --&gt;
  &lt;div class="jumbotron"&gt;
      &lt;h1&gt;Feedback&lt;/h1&gt;
  
      &lt;p&gt;This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It
          includes the responsive CSS and HTML, so it also adapts to your viewport and device.&lt;/p&gt;
  
      &lt;p&gt;To see the difference between static and fixed top navbars, just scroll.&lt;/p&gt;
  
      &lt;p&gt;
          &lt;a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button"&gt;View navbar docs &amp;raquo;&lt;/a&gt;
      &lt;/p&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;!-- /container --&gt;
  {% endif %}
  &lt;/div&gt;
  {% endblock %}
  {% block extra_body %}
  {% endblock %}
  {% block footer %}
  &lt;footer&gt;
  &lt;!--Contact Button 4 --&gt;
  &lt;div class="container"&gt;
      &lt;div class="row"&gt;
          &lt;br/&gt;&lt;br/&gt;&lt;br/&gt;
          &lt;a class="btn btn-primary btn-lg" data-toggle="modal" data-target="#contact" data-original-title&gt;
              Contact
          &lt;/a&gt;
  
          &lt;div class="modal fade" id="contact" tabindex="-1" role="dialog" aria-labelledby="contactLabel"
               aria-hidden="true"&gt;
              &lt;div class="modal-dialog"&gt;
                  &lt;div class="panel panel-primary"&gt;
                      &lt;div class="panel-heading"&gt;
                          &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;×&lt;/button&gt;
                          &lt;h4 class="panel-title" id="contactLabel"&gt;&lt;span
                                  class="glyphicon glyphicon-info-sign"&gt;&lt;/span&gt; Any questions? Feel free to contact
                              us.&lt;/h4&gt;
                      &lt;/div&gt;
                      &lt;form action="#" method="post" accept-charset="utf-8"&gt;
                          &lt;div class="modal-body" style="padding: 5px;"&gt;
                              &lt;div class="row"&gt;
                                  &lt;div class="col-lg-6 col-md-6 col-sm-6" style="padding-bottom: 10px;"&gt;
                                      &lt;input class="form-control" name="firstname" placeholder="Firstname" type="text"
                                             required autofocus/&gt;
                                  &lt;/div&gt;
                                  &lt;div class="col-lg-6 col-md-6 col-sm-6" style="padding-bottom: 10px;"&gt;
                                      &lt;input class="form-control" name="lastname" placeholder="Lastname" type="text"
                                             required/&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;div class="row"&gt;
                                  &lt;div class="col-lg-12 col-md-12 col-sm-12" style="padding-bottom: 10px;"&gt;
                                      &lt;input class="form-control" name="email" placeholder="E-mail" type="text"
                                             required/&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;div class="row"&gt;
                                  &lt;div class="col-lg-12 col-md-12 col-sm-12" style="padding-bottom: 10px;"&gt;
                                      &lt;input class="form-control" name="subject" placeholder="Subject" type="text"
                                             required/&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;div class="row"&gt;
                                  &lt;div class="col-lg-12 col-md-12 col-sm-12"&gt;
                                      &lt;textarea style="resize:vertical;" class="form-control" placeholder="Message..."
                                                rows="6" name="comment" required&gt;&lt;/textarea&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="panel-footer" style="margin-bottom:-14px;"&gt;
                              &lt;input type="submit" class="btn btn-success" value="Send"/&gt;
                              &lt;!--&lt;span class="glyphicon glyphicon-ok"&gt;&lt;/span&gt;--&gt;
                              &lt;input type="reset" class="btn btn-danger" value="Clear"/&gt;
                              &lt;!--&lt;span class="glyphicon glyphicon-remove"&gt;&lt;/span&gt;--&gt;
                              &lt;button style="float: right;" type="button" class="btn btn-default btn-close"
                                      data-dismiss="modal"&gt;Close
                              &lt;/button&gt;
                          &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;/footer&gt;
  {% endblock %}
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="{{ STATIC_URL }}twitter_bootstrap/dist/js/bootstrap.js"&gt;&lt;/script&gt;
  &lt;script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.jquery.com/jquery-1.10.2.min.js"&gt;&lt;/script&gt;
  &lt;script src="{{ STATIC_URL }}twitter_bootstrap/js/affix.js"&gt;&lt;/script&gt;
  &lt;script src="{{ STATIC_URL }}twitter_bootstrap/js/alert.js"&gt;&lt;/script&gt;
  &lt;script src="{{ STATIC_URL }}twitter_bootstrap/js/modal.js"&gt;&lt;/script&gt;
  &lt;script src="{{ STATIC_URL }}twitter_bootstrap/js/dropdown.js"&gt;&lt;/script&gt;
  &lt;script src="{{ STATIC_URL }}twitter_bootstrap/js/scrollspy.js"&gt;&lt;/script&gt;
  &lt;script src="{{ STATIC_URL }}twitter_bootstrap/js/tab.js"&gt;&lt;/script&gt;
  &lt;script src="{{ STATIC_URL }}twitter_bootstrap/js/tooltip.js"&gt;&lt;/script&gt;
  &lt;script src="{{ STATIC_URL }}twitter_bootstrap/js/popover.js"&gt;&lt;/script&gt;
  &lt;script src="{{ STATIC_URL }}twitter_bootstrap/js/button.js"&gt;&lt;/script&gt;
  &lt;script src="{{ STATIC_URL }}twitter_bootstrap/js/collapse.js"&gt;&lt;/script&gt;
  &lt;script src="{{ STATIC_URL }}twitter_bootstrap/js/carousel.js"&gt;&lt;/script&gt;
  &lt;script src="{{ STATIC_URL }}twitter_bootstrap/js/transition.js"&gt;&lt;/script&gt;
  &lt;script src="{{ STATIC_URL }}twitter_bootstrap/js/test.js"&gt;&lt;/script&gt;
  &lt;script src="{{ STATIC_URL }}accesss/test.js"&gt;&lt;/script&gt;
  &lt;script src="{{ STATIC_URL }}footer/test.js"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>