Bootstrap with Flask

Asked 31/12, 2016 at 22:38 Answered 8/7, 2020 at 22:52

Solved python twitter-bootstrap flask flask-bootstrap

I am looking to integrate a bootstrap template into my flask program. Specifically: I downloaded the zip file for this template:

https://startbootstrap.com/template-overviews/sb-admin/

However, the file is in a completely different format from the Flask template/static format.

I also downloaded Flask-Bootstrap (python) but have not been able to successfully import the template accurately.

I am looking for advice on how to easily import this type of template into my flask code (including css, jQuery, html, etc.). Thanks!

Dumpy answered 31/12, 2016 at 22:38 Comment(2)

I see no reason why you couldn't get this to work. I'd ignore Flask-Bootstrap if you want to use this template. You need to be more specific with your question...not sure what you're looking for – Aforesaid 31/12, 2016 at 23:43

As @PJSantoro said it is probably easiest to ignore Flask-Bootstrap. However If you are using Flask-Bootstrap you need to configure it the way that it serves your static template files. This should get you started. – Countertenor 1/1, 2017 at 11:58

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

Fendley answered 1/1, 2017 at 9:55 Comment(0)

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>

Stearic answered 4/8, 2018 at 15:57 Comment(0)

You can install Flask's Bootstrap dependency with pip install flask-bootstrap in your terminal. However, using flask-bootstrap can limit the control you have over the styling and design of your website.

It also has documentation here, and for the documentation specific to flask-bootstrap, go here.

Flask Bootstrap works well with flask-wtf and navbars. I am currently looking for a way to make pages styled with flask-bootstrap responsive, as it is not very easy to implement in my experience.

Debidebilitate answered 8/7, 2020 at 22:52 Comment(0)

Recommended topics

Hot tags