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
