title: How do I correctly inherit templates in flask that use bootstrap?
body: <p>It seems if I use <code>{% extends "base.html" %}</code> it inherits the template correctly but the navbar doesn't use bootstrap. </p>
  
  <p>If I use <code>{% extends "bootstrap/base.html" %}</code> it doesn't even work. I don't get errors but it just sets the title to Index and then the page is blank. </p>
  
  <p>Another note: The only way I've gotten the navbar to show up is directly putting it inside <code>index.html</code> and using <code>{% extends "bootstrap/base.html" %}</code></p>
  
  <p>I am using <em>Flask Web Development by Miguel Grinberg</em> and the code is identical except the obvious content.</p>
  
  <p>What am I doing wrong? And does anyone have good resources for slowly jumping into Flask that doesn't just dive in head first? I'm having trouble understanding the little nitpicky details.</p>
  
  <p><strong>base.html:</strong></p>
  
  <pre><code>{% extends "bootstrap/base.html" %}
  &lt;html&gt;
  
  &lt;head&gt;
      {% block head %}
      &lt;title&gt;{% block title %}{% endblock %} - MyFlask&lt;/title&gt;
      {% endblock %}
  &lt;/head&gt;
  
  &lt;body&gt;
  
      {% block navbar %}
          &lt;div class="navbar navbar-inverse" role="navigation"&gt;
              &lt;div class="container"&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;Navbar&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="/"&gt;MyFlask&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="/"&gt;Home&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="/bootstrap"&gt;&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      {% endblock %}
  
      {% block content %}
          &lt;div class="container"&gt;
              {% block page_content %}{% endblock %}
          &lt;/div&gt;
      {% endblock %}
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>index.html:</strong></p>
  
  <pre><code>{% extends "base.html" %}
  {% block title %}Index{% endblock %}
  
  {% block page_content %}
      &lt;h3&gt;Session info:&lt;/h3&gt;
      &lt;p&gt;&lt;b&gt;Browser:&lt;/b&gt; {{ browser }}&lt;/p&gt;
  {% endblock %}
  </code></pre>