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

Deep Dive into Serverless Infrastructure with CI/CD Workflow — Part 1 (Code Repository setup)

Matrix multiplication

「Understanding Darwinia Bridge 1–8」How to Develop a Substrate-to-Substrate Bridge

Create FAQ Bot Using Dialogflow Knowledge Connector

7 Best Scala Frameworks & Libraries for Concurrency, Web Development, and Big Data to Learn in 2022

10 Best Scala Frameworks to Learn

Prims algorithm

API communication In A Nutshell

Getting to know BIM

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

Which one is faster? Beautiful Soup vs Pandas’​ ‘read_html’​ function

Easy way to Scrape a Table from a website with Python

Web Scrapping With BeatifulSoup in Python

How To Deploy Django App To Heroku With Images