Bootstrap with Flask

The answer by @mohammad-amin is useful for the directory structuring, but I needed an example of how to use url_for within HTML. With his example structure and files, you can load style.css like this:

<html>
  <head>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
  </head>
  <body>
  </body>
</html>

You need to create templates and static folders in your project folder, put all .html files in templates folder and all other files (CSS, JS, JPG, etc) in static folder and then in your html file use url_for to load the static files, instead of the default HTML way.

This is a sample project structure:

-project
    app.py
    - templates
        index.html
    -static
        -css
          style.css
        -js
          example.js
        -img 
          example.jpg
  • You can also use custom folders and structure but you need to define them while creating the application instance Docs

Tags:

Python

Twitter Bootstrap

Flask

Flask Bootstrap

Recent Posts