title: scrollspy in flask bootstrap not working (Jinja2)
body: <p>I've been trying all the fixes available here in SO, but it hasn't solved my problem yet.</p>
  
  <p>Here's my current code (HTML):</p>
  
  <pre><code>{% extends "base.html" %}
  {% import "bootstrap/wtf.html" as wtf %}
  &lt;body class="scroll-area" data-spy="scroll" data-target="#spy" data-offset="0"&gt;
  {% block navbar %}
  &lt;div &gt;
          &lt;div  id="spy" class="navbar navbar-default navbar-fixed-top" role="navigation"&gt;
              &lt;div class="container-fluid"&gt;
                  &lt;div class="navbar-header"&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;/button&gt;
                      &lt;a class="navbar-brand" href="#section1"&gt;Home&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="navbar-collapse collapse"&gt;
                      &lt;ul class="nav navbar-nav"&gt;
                          &lt;li&gt;&lt;a href="#section2"&gt;Who Am I&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#section3"&gt;What I Can Do For You&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#section4"&gt;Contact Me&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                      &lt;ul class="nav navbar-nav navbar-right"&gt;
                          &lt;li&gt;&lt;a href="/"&gt;&lt;span class="glyphicon glyphicon-user"&gt;&lt;/span&gt;Test&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="/"&gt;&lt;span class="glyphicon glyphicon-log-in"&gt;&lt;/span&gt;Testing&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  &lt;/div&gt;
  {% endblock %}
  </code></pre>
  
  <p>javascript part:</p>
  
  <pre><code>{% block script %}
  {{super()}}
  &lt;script src="http://code.jquery.com/jquery-1.11.0.min.js"&gt;&lt;/script&gt;
  &lt;script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"&gt;&lt;/script&gt;
  {% endblock %}
  </code></pre>
  
  <p>Any ideas appreciated :)</p>
  
  <p>Update: </p>
  
  <p>I've tried using a plain version (all pure html, css and js) and it works fine.
  The bug might have something to do on Flask's Jinja2 templating.</p>