Flask with Bootstrap and Jinja Templating




This Flask tutorial covers the idea of templates and using Bootstrap for your styling / CSS needs.

First, we cover templates. The idea of templates is two-fold. First, you use templates so you can have one location for code that corresponds to your navbar, for example. If you had the navbar code on every single page, think about what you'd have to do if you wanted to change your navbar. Yikes! Thus, templating is used for this. Also, with the marriage of Python and HTML in mind, we use the Jinja templating of Flask to pass variables from Flask to HTML.

If you would like an explanation of the following HTML code, see the above video.

File: main.html, server location: /var/www/PythonProgramming/PythonProgramming/templates/main.html 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Python Programming Tutorials</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
	<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
</head>
</html>

<p>Hi there how ya doin!?</p>

Notice the line: "{{ url_for('static', filename='css/bootstrap.min.css') }}"

The curly braces denote a variable, which is made possible by Jinja templating. This variable, is whatever the value of the function, url_for, is. The parameters we pass through our url_for function are: Location directory (static), and then the filename (css/bootstrap.min.css). This is how we can dynamically reference the files, no matter where the user is located on our website.

Variables can be the result of functions built into Flask (url_for is a Flask function), but they can also be variables that you have passed from your Python script, through Flask and Jinja templating, through to your HTML page.

Logic via Jinja templating looks like:

{% if something %}
    do something
{% endif %}

Next, to continue on, we're going to need a few things. We're referencing a favicon, so we let's grab that here.

Now we also need Bootstrap. Once there, click on download Bootstrap, and then again on Download Bootrap. You want the regular version, not the source code or the Sass. Once downloaded, extract the files and you should have css, fonts, and js directories. Take those three directories, and move them to within your "static" directory.

Finally, we need to modify our init.py file, so:

File: __init__.py, server location: /var/www/PythonProgramming/PythonProgramming/__init__.py 
from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def homepage():
    return render_template("main.html")


if __name__ == "__main__":
    app.run()

Here, the major changes are that we import render_template, and then we return render_template, with "main.html" as the parameter.

As usual, every time we modify the Python files, we need to run the following via SSH:

service apache2 restart

Now you should be able to load your website successfully, seeing any text you put in your HTML file, as well as noticing that the Bootstrap CSS file is affecting your styling.

If you are having trouble anywhere, leave a comment on the YouTube video. Otherwise, you're ready to move on to the next tutorial.


There exists 3 quiz/question(s) for this tutorial. for access to these, video downloads, and no ads.

The next tutorial:





  • Introduction to Practical Flask

  • Basic Flask Website tutorial

  • Flask with Bootstrap and Jinja Templating
  • Starting our Website home page with Flask Tutorial

  • Improving the Home Page Flask Tutorial

  • Finishing the Home Page Flask Tutorial

  • Dynamic User Dashboard Flask Tutorial

  • Content Management Beginnings Flask Tutorial

  • Error Handling with Flask Tutorial

  • Flask Flash function Tutorial

  • Users with Flask intro Tutorial

  • Handling POST and GET Requests with Flask Tutorial

  • Creating MySQL database and table Flask Tutorial

  • Connecting to MySQL database with MySQLdb Flask Tutorial

  • User Registration Form Flask Tutorial

  • Flask Registration Code Tutorial

  • Finishing User Registration Flask Tutorial

  • Password Hashing with Flask Tutorial

  • Flask User Login System Tutorial

  • Decorators - Login_Required pages Flask Tutorial

  • Dynamic user-based content Flask Tutorial

  • More on Content Management Flask Tutorial

  • Flask CMS Concluded Flask Tutorial

  • The Crontab Flask Tutorial

  • Flask SEO Tutorial

  • Flask Includes Tutorial

  • Jinja Templating Tutorial

  • Flask URL Converters Tutorial

  • Flask-Mail Tutorial for email with Flask

  • Return Files with Flask send_file Tutorial

  • Protected Directories with Flask Tutorial

  • jQuery with Flask Tutorial

  • Pygal SVG graphs with Flask Tutorial

  • PayPal with Flask Web Development Tutorial

  • Securing your Flask website with SSL for HTTPS using Lets Encrypt