How Flask-Bootstrap works?
<p>I'm learning Flask web development, and the tutorial I'm following introduces an extension called <strong>Flask-Bootstrap</strong>. To use this extension, you must initialize it first, like this:</p>

<pre><code>from flask_bootstrap import Bootstrap
# ...
bootstrap = Bootstrap(app)
</code></pre>

<p>Weirdly enough to me, the variable <code>bootstrap</code> is not used in the rest of my module. However, if I comment out this line, a <code>jinja2.exceptions.TemplateNotFound</code> exception will be raised. Also, the templates used start with this line:</p>

<pre><code>{% extends "bootstrap/base.html" %}
</code></pre>

<p>But I don't have a directory named <code>/bootstrap</code> under <code>/templates</code>!</p>

<p>I want to know what's going on:</p>

<ol>
<li>What does the <code>bootstrap = Bootstrap(app)</code> line do?</li>
<li>Where does <code>bootstrap/base.html</code> reside? </li>
</ol>

<p>As @davidism said in his comment, the <code>bootstrap = Bootstrap(app)</code> line "installs the extension on the app". The mechanism behind such installation is beyond the scope of this answer.</p>

<p>The <code>bootstrap/base.html</code> resides in the Flask-Bootstrap package. For example, on my machine it's absolute path is:</p>

<pre><code>/Users/sunqingyao/Documents/Projects/flasky/venv/lib/python2.7/site-packages/flask_bootstrap/templates/bootstrap/base.html
</code></pre>

<p>Here is its content:</p>

<pre><code>{% block doc -%}
&lt;!DOCTYPE html&gt;
&lt;html{% block html_attribs %}{% endblock html_attribs %}&gt;
{%- block html %}
  &lt;head&gt;
    {%- block head %}
    &lt;title&gt;{% block title %}{{title|default}}{% endblock title %}&lt;/title&gt;

    {%- block metas %}
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    {%- endblock metas %}

    {%- block styles %}
    &lt;!-- Bootstrap --&gt;
    &lt;link href="{{bootstrap_find_resource('css/bootstrap.css', cdn='bootstrap')}}" rel="stylesheet"&gt;
    {%- endblock styles %}
    {%- endblock head %}
  &lt;/head&gt;
  &lt;body{% block body_attribs %}{% endblock body_attribs %}&gt;
    {% block body -%}
    {% block navbar %}
    {%- endblock navbar %}
    {% block content -%}
    {%- endblock content %}

    {% block scripts %}
    &lt;script src="{{bootstrap_find_resource('jquery.js', cdn='jquery')}}"&gt;&lt;/script&gt;
    &lt;script src="{{bootstrap_find_resource('js/bootstrap.js', cdn='bootstrap')}}"&gt;&lt;/script&gt;
    {%- endblock scripts %}
    {%- endblock body %}
  &lt;/body&gt;
{%- endblock html %}
&lt;/html&gt;
{% endblock doc -%}
</code></pre>

<p><sub>The answer to "how can Jinja2 find <code>base.html</code>" would be added as soon as I find the relevant part in the document.</sub></p>

python twitter-bootstrap templates flask flask-bootstrap