Migrate from Flask-Bootstrap

If you come from Flask-Bootstrap, looking for an alternative that supports Bootstrap 4, well, then you are in the right place.

Bootstrap-Flask originated as a fork of Flask-Bootstrap, but some APIs were changed, deleted and improved, some bugs were fixed, and on top of all that, some new macros were added. This tutorial will go through all the steps to migrate from Flask-Bootstrap.

Uninstall and Install

Flask-Bootstrap and Bootstrap-Flask can’t live together, so you have to uninstall Flask-Bootstrap first and then install Bootstrap-Flask:

$ pip uninstall flask-bootstrap
$ pip install bootstrap-flask

If you accidentally installed both of them, you will need to uninstall them both first:

$ pip uninstall flask-bootstrap bootstrap-flask
$ pip install bootstrap-flask

If you want to use both Flask-Bootstrap and Bootstrap-Flask for different projects, you can use virtual environment.

The mix of these two project will cause the template not found error:

  • TemplateNotFound jinja2.exceptions.TemplateNotFound: bootstrap/nav.html

  • TemplateNotFound jinja2.exceptions.TemplateNotFound: bootstrap/wtf.html

Initialize the Extension

The initialization of this extension is the same as with Flask-Bootstrap. The package’s name is still flask_bootstrap, in order to follow the rule of Flask extension development and easy the pain of migration.

from flask_bootstrap import Bootstrap
from flask import Flask

app = Flask(__name__)

bootstrap = Bootstrap(app)

Create Base Template

In Flask-Bootstrap, there is a built-in base template called bootstrap/base.html. This extension does not provide one. You have to create it by yourself; an example starter is given here:

<!doctype html>
<html lang="en">
    <head>
        {% block head %}
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        {% block styles %}
            <!-- Bootstrap CSS -->
            {{ bootstrap.load_css() }}
        {% endblock %}

        <title>Your page title</title>
        {% endblock %}
    </head>
    <body>
        <!-- Your page content -->
        {% block content %}{% endblock %}

        {% block scripts %}
            <!-- Optional JavaScript -->
            {{ bootstrap.load_js() }}
        {% endblock %}
    </body>
</html>

Just create a file called base.html inside your templates folder, copy the contents above into it. There are two resource helper methods used in the example template above (i.e. bootstrap.load_css() and bootstrap.load_js()). They will generate <href></href> and <script></script> codes to include Bootstrap’s CSS and JavaScript files. These default to load the resources from CDN (provided by jsDelivr). If you set the configuration variable BOOTSTRAP_SERVE_LOCAL to True the local resources inside the package folder will be used instead.

It’s optional to use these resources methods, you can write the codes by yourself to load Bootstrap resources in your application’s static folder, or from a different CDN provider that you want to use.

Change Template and Macro Name

The template bootstrap/wtf.html changed to bootstrap/form.html, some macro’s name was changed too:

Old Name

New Name

bootstrap/wtf.html

bootstrap/form.html

quick_form()

render_form()

form_field()

render_field()

flashed_messages()

render_messages()

For example, you will need to change the import statement:

{% from 'bootstrap/wtf.html' import quick_form, form_field %}

to:

{% from 'bootstrap/form.html' import render_form, render_field %}

The macros below were removed (or not supported yet):

  • ie8()

  • icon()

  • form_button()

  • analytics()

  • uanalytics()

There are also some new macros were introduced, check them out at Macros section.