Bootstrap 4 for Python Flask

Python Flask is a micro-framework for creating web apps. It is very lightweight and easy to get started with, and also very popular. Since Flask is a web framework, it follows that working with it will require knowledge of HTML.

However, HTML on its own is very limited in terms of what it can do for the appearance of a web page. Sure, it controls the basic structure, and that is very important, but more is needed to create attractive designs that will appeal to your users and make them want to use your site for whatever purpose you created it for.

The key to controlling the appearance of a web-page is CSS – Cascading Style Sheets. CSS defines how HTML elements are to be displayed. It is a powerful tool, but it involves quite a learning curve to become proficient in.

There is a shortcut though, if you want to make visually stunning web-pages with the minimal amount of CSS!

Using Bootstrap 4 with Python Flask

In this article we are going to learn how to make a 1-page website using Python Flask and Bootstrap 4, as a springboard for you to dive into the wonderful world of easily styled Python Web apps. Lets’ make a start.

  • If you haven’t already done so, install Flask from a command line using pip install flask on Windows or pip3 install flask on Mac/Linux.
  • Create a new folder named “Python Flask Bootstrap Demo” somewhere convenient on your computer.
  • Create a file called app.py
  • Add the following contents:

  • Create a folder called templates inside the current folder
  • Create a new file called index.html
  • Add the following demo HTML code, adapted from the w3schools website:

  • Run app.py
  • You will see a message like this:

  • Navigate to http://127.0.0.1:5000/ in your browser, and ta da there should be your Bootstrap 4 Demo homepage, served by Python Flask.

The details of how Flask works are not the subject of this article, but there is plenty of information available online for the curious, and we will probably cover Flask here on Compucademy in the near future.

What I want to do here is encourage you to explore the boilerplate code provided and begin to understand how it works. You should change things, break things, move things around and generally get your hands dirty. It will take a bit of time to become proficient with Bootstrap, but it is surprisingly quick and easy to make beautiful designs once you have understood some basics.

To get you started here are a few pointers:

  • Bootstrap can be included via a remote server (CDN) or from your own project files after you have downloaded them
  • In this example it is included via <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  • The JavaScript parts of Bootstrap are not always needed. I’ve left them in so you can see how to include them.
  • You should generally used the latest versions of the CSS and JS, available here.
  • The CSS styling is applied through classes added to html elements. These classes have pre-defined CSS defined on them.
  • Some example classes are: — container: used to wrap around a collection of elements which you want to apply Bootstrap classes to — row: used to separate content into horizontal rows — col-sm-8: uses the powerful Bootstrap grid system to control grid-based layouts. This example means “on small devices and below (down to xs – extra small) this element takes up 8 out of 12 column units.” I.e. it will cover 2/3 of the available horizontal space, since Bootstrap is based on a 12-column division of rows. — navbar navbar-expand-sm bg-dark navbar-dark gives you all the styling you need to create a smart responsive navigation menu.

Separation of Style from Layout with Bootstrap 4

One thing that you may notice about the way Bootstrap works is that the often recommended separation of style from layout is not actually kept to. This is because when writing your HTML, you set classes which have names which are semantically meaningful in terms of their visual behaviour. If you were strictly separating style from layout you would need to do something like <div class="div-number-1"> and then you would have the freedom to display that div in anyway you saw fit without being concerned by the fact that is is for example supposed to function as a row. This is not an important issue in practice though so don’t let it worry you. It is really just an observation.


So there you have it – a springboard to making amazing looking Flask apps quickly and easily using Bootstrap 4. I hope you have fun with it, and if you want to keep up to date with articles and offers from Compucademy, please consider joining our mailing list.

Happy computing.

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}

Join our mailing list

Join our mailing list to receive awesome articles about learning Python and Computer Science in a fun and accessible way, straight to your inbox.

 Take your Python skills to the next level!

with our free email course on object oriented programming with Python