Introduction to Flask bootstrap
Flask bootstrap is defined as a module that enables the packaging of Bootstrap into an extension so that developers are able to use them. This module mainly consists of a blueprint named “bootstrap” and helps in creating links for serving the bootstrap from a Content Delivery Network and has zero boilerplate codings in the application. Bootstrap in itself is the most popular CSS framework used for the development of responsive and mobile-first websites. This tech stack enables the development of faster and easier web applications built by Flask. This module enables developers the allowing them to include of bootstrap JavaScript and bootstrap CSS files into the project. In this article we will look at the transformation bootstrap brings in without changing a single line of the application code.
Syntax
Development of web applications using Flask has become an indispensable skill for any web application developer and when it comes to the look and feel of the application, the dependency of application’s success is very high on the same. In this section, we will learn about bootstrapping in a flask from the syntax perspective so that when we learn about how bootstrap works, it is easier to map it back with the syntax learned here for a complete picture of the topic in discussion.
Installing flask bootstrap and configuring it:
pip install bootstrap-flask
Importing Bootstrap in application code
from flask_bootstrap import Bootstrap
Instantiating the bootstrap using the application instance:
Bootstrap(app)
Loading CSS in a template:
{{ bootstrap.load_css() }}
Loading JS in a template:
{{ bootstrap.load_js() }}
How bootstrap works in Flask?
In the current article, we will talk about the latest module available for the employment of bootstrap in a Flask application. This article will not be of much help for the ones who are looking for the flask-bootstrap module. Bootstrap-flask is the module which we will be discussing here in detail. This module is an alternative to the earlier version that supports Bootstrap 4. Though bootstrap-flask is a forking of flask-bootstrap some of the APIs out of which a few of them will be discussed here were changed, deleted, or improved along with fixing of bugs, and inclusion of new macros. We will also briefly talk about migration from flask-bootstrap.
Let us talk about the first step in the usage of bootstrap-flask. We would need to use the command using pip for installing the respective module i.e. pip install bootstrap-flask. Now eventually you might not land into any error until and unless you have flask-bootstrap also installed. In such a scenario, we would first need to use the command pip to uninstall the bootstrap-flask and then proceed with the installation of the bootstrap. In scenarios where both the modules are installed, one would need to uninstall them both at the very first step and then install them on the bootstrap-flask. In certain scenarios, if both the modules are required for different projects, the only solution is to use them in separate virtual environments.
Once the module is installed, we would need to import the module into our python code. Once done, we would need to instantiate the bootstrap object bypassing it with the Flask app object. This helps in installing the extension of bootstrap into the Flask app. Now the bootstrap-flask is installed for the Flask application object, there is html that can be inherited to use it as a template. This is achieved through Flask’s template search path. The search is performed in the application’s template folder or in the blueprint’s template folder. The module actually registers a blueprint to the Flask application.
Now there are some available macros in the module, understanding of which is equally important for the full cycle understanding of bootstrap.
| Name of the Macro | Templates Path | Task of the macro |
| render_field() | bootstrap/form.html | WTForms form field is rendered |
| render_form() | bootstrap/form.html | WTForms form is rendered |
| render_form_row() | bootstrap/form.html | Row of a grid form is rendered |
| render_hidden_errors() | bootstrap/form.html | Error messages for hidden form field is rendered |
| render_pager() | bootstrap/pagination.html | Basic Flask-SQLAlchemy pagniantion is rendered |
| render_pagination() | bootstrap/pagination.html | Standard Flask-SQLAlchemy pagination is rendered |
| render_nav_item() | bootstrap/nav.html | Navigation item is rendered |
| render_breadcrumb_item() | bootstrap/nav.html | Breadcrumb item is rendered |
| render_static() | bootstrap/utils.html | Resource reference code (i.e. < link >, < script >) is rendered |
| render_messages() | bootstrap/utils.html | Flashed messages send by flash( ) function is rendered |
| render_icon() | bootstrap/utils.html | Bootstrap icon is rendered |
| render_table() | bootstrap/table.html | Table with given data is rendered |
Usage of the macros is pretty simple. One would just need to import them from the path mentioned and call them generally as any other macro is called. By using this way, the template from the path is picked and corresponding to its task is used for fulfilling the flask application’s task. Also, several configurations are present to make necessary arrangements in making the flask application perform at its best!
Examples
Here are the following examples mention below
Example #1
Installing bootstrap and configuring it:
Syntax
pip install bootstrap-flask
Output:
Example #2
Importing Bootstrap in application code:
Syntax
from flask_bootstrap import Bootstrap
Output:
Example #3
Flask application with bootstrap rendered:
Syntax:
Index.html:
{% extends "base.html" %}
{% block title %}Home Page{% endblock %}
{% block content %}
<h1>Home Page for Bootstrap tutorial</h1>
{% endblock %}
Python file:
from flask import Flask, render_template
from flask_bootstrap import Bootstrap
appFlask = Flask(__name__)
Bootstrap(appFlask)
@appFlask.route('/')
def index():
return render_template('index.html')
if __name__ == '__main__':
appFlask.run(debug=True)
Output:
Here we see that a layout has been prepared with the html which is actually extended from the base.html layout.
Conclusion
In conclusion, in this article, we have learned about the bootstrap and its configuration along with the application in Flask. We can also use this methodology to include a template without even changing a line in the code of an existing project as well so that developer doesn’t have to start from scratch. The only thing which needs to be kept in mind during the usage is not to keep bootstrap-flask and flask-bootstrap together. Use the one which suits best for the application. Like anytime else, rest is to you for experimentation.
Recommended Articles
This is a guide to Flask bootstrap. Here we discuss the bootstrap and its configuration along with the application in Flask and Examples with outputs. You may also have a look at the following articles to learn more –
