Flask with Bootstrap — A newbie friendly tutorial

How do you structure a simple app with Flask and Bootstrap?

I couldn’t find a code newbie friendly tutorial on this topic when I needed it, so I wrote one.

You need a Python file (main.py in this example) and a HTML file (index.html in this example).

main.pyfrom flask import Flask, render_template
from flask_bootstrap import Bootstrap

app = Flask(__name__)
Bootstrap(app)


@app.route("/")
def home():
return render_template("index.html")


if __name__ == '__main__':
app.run(debug=True)
index.html{% extends 'bootstrap/base.html' %}

{% block title %}
Index
{% endblock %}

{% block content %}
<h1>Lorem ipsum</h1>
<p>dolor sit amet, consetetur sadipscing elitr</p>
{% endblock %}

The file structure has to be the usual Flask file structure. The index.html must be in the templates directory!

Importing flask in PyCharm is no problem. Importing flask_bootstrap is more difficult. When you run the program for the first time you might get the following error message:

ModuleNotFoundError: No module named 'flask_bootstrap'

Then you can install it manually in the terminal in PyCharm, using pip install Flask-Bootstrap :

After that go to PyCharm — Preferences — Project — Python Interpreter — “+” button on the lower left. Search for flask-bootstrap and install it:

After successfully running main.py, click on the Python local host http://127.0.0.1:5000/ in the run window.

Then your browser will show you the index.html .

END

--

--

--

Code Newbie learning Python

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

The Great Framework Battle (Flutter vs. React Native)

Chatbot design and Scrum: A happy marriage

Balanced Search Trees

6 tips to improve cloud storage user adoption

#1 Cloud Series: The IAAS | PAAS | SAAS

GitHub 101

More information— BiSoga continued — Response to William McCrudden

How To Add Helpers Methods To Laravel 9 Project ?

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
k4th4

k4th4

Code Newbie learning Python

More from Medium

“For” Loops Explained in Simple English (JavaScript)

Japanese Character Validation using Regex — Hankaku & Zenkaku

Setup Plesk Control Panel For Wordpress Website — Part 3

Code Challenge Python Loops