BootStrap for Flask

Styling

I decided to use BootStrap in order to avoid having to write the CSS from scratch. I used the free Freelancer template which you can download here. The files are downloaded in a zipped folder so you need to extract them first.

Flask App Layout

Starting off, your basic Flask app layout should look a little like this:

My app.py file is currently where the main Python code is written. You can name this file what you want but I think it is best to call it something intuitive like app.py or run.py. It is the file that I will run to start the local server to run my app.

Once I run the file in iTerm I will receive the URL for my localhost where the application is running. I simply copy the URL and past it into my browser of choice which for me is Google Chrome:

 

Inserting BootStrap Files within Flask

When you have extracted the zipped BootStrap folder you will need to move all the folders, except the html file, to your static directory. The html file should be put within the templates folder.

 

 

Path Errors Solution

After you have done this you can run the app.py file and navigate to your web app. If the app is already running then you will just need to refresh the web app page. You should notice quite a few on page errors. You can inspect these in Google Chrome by right clicking on the page and choosing Inspect. The errors are all linked to the file paths. In order to rectify this you will need to add /static/ in front of all the href and img src paths. The best way to do this is to open the html file, that you downloaded with the BootStrap template, open it in your text editor and if you are a Mac user press cmd + F and type in the keywords you want to find e.g. href and img src.

 

Did you find this blog post useful? Are you currently building a project in Flask? Do you have problems with BootStrap or do you have useful solutions? If so I would love to hear from you in the comments section below or by dropping me an e-mail.