Configuring Flask to correctly load Bootstrap js and css files

Question

How can you use the "url_for" directive in Flask to correctly set things up so a html page that uses Bootstrap and RGraph works ?

Say my html page looks like this (partial snippet) :-

<!doctype html>
<html lang="en">
    <head>
            <meta charset="utf-8">
            <link href="scripts/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
            <title>HP Labs: Single Pane Of Glass (Alpha)</title>
            <script src="scripts/RGraph/libraries/RGraph.common.core.js" ></script>
            <script src="scripts/RGraph/libraries/RGraph.line.js" ></script>
            <script src="scripts/RGraph/libraries/RGraph.common.effects.js" ></script>
            <script src="scripts/RGraph/libraries/RGraph.line.js" ></script>

 ......

 </html>

Here's what I've done/want to do :-

Created a "templates" directory alongside my Flask module and placed this html file in it.
Created a "static" directory alongside my Flask module but am unsure where and how many "url_for" type statements to use and where they should go. So currently the "scripts" directory is a sub-directory in the "templates" directory (I know this is incorrect).
I'd like to be able to reference all the Bootstrap and RGraph js and css correctly (right now seeing lots of 404s).

Can anyone direct me to correctly configure Flask (running the dev server) to do this ? Right now the js and css doesn't work.

Thanks !

Martijn Pieters · Accepted Answer · 2014-02-26 16:42:41Z

14

Put the scripts directory in your static subdirectory, then use:

<link href="{{ url_for('static', filename='scripts/bootstrap/dist/css/bootstrap.css') }}" rel="stylesheet">

The pattern here is:

{{ url_for('static', filename='path/inside/the/static/directory') }}

which will be replaced with the correct URL for static resources, even if you ever switched all these files to a different hosting (like a CDN).

answered Feb 26, 2014 at 16:42

Martijn Pieters

1.1m326 gold badges4.2k silver badges3.4k bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

bzo Over a year ago

How would this work for javascript (where there is a "<script>" tag ?

bzo Over a year ago

Also, do you have to define a "url_for" statement for each stylesheet or js file ? Is there a way to somehow say "look here for all static content e.g. *.css or *.js" (regardless of what it's called)

Martijn Pieters Over a year ago

@bzo: you'd use the same construct in the src=".." attribute. The url_for() function returns a string, a URL to use wherever you need a URL.

Martijn Pieters Over a year ago

@bzo: You'd have to use this for each URL, you cannot use this for a directory. You could write additional code that lists all files in a specific directory and lets you then use a loop to create script and style tags for each, but that would somewhat defeat the purpose of the static route as that would not allow you to move the static resources to a CDN.

corvid · Accepted Answer · 2014-09-06 17:43:06Z

4

I am not sure if this is helpful, but I saw this around while studying up on flask:

from flask.ext.bootstrap import Bootstrap
# ...
bootstrap = Bootstrap(app)

you can pip install flask-bootstrap and it should help

then on your template:

{% extends "bootstrap/base.html" %}

edited Sep 6, 2014 at 17:43

answered Mar 26, 2014 at 12:56

corvid

11.3k12 gold badges71 silver badges135 bronze badges

1 Comment

rexbelia Over a year ago

I did this but I get "bootstrap/base.html" unresolved reference

Collectives™ on Stack Overflow

Configuring Flask to correctly load Bootstrap js and css files

2 Answers 2

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related