CODEWITHSUNDEEP
pythonflask
bzo
bzo

Reputation: 1626

Configuring Flask to correctly load Bootstrap js and css files

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 :-

  1. Created a "templates" directory alongside my Flask module and placed this html file in it.

  2. 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).

  3. 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 !

Upvotes: 10

Views: 14583

Answers (2)

corvid
corvid

Reputation: 11187

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" %}

Upvotes: 4

Martijn Pieters
Martijn Pieters

Reputation: 1121594

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).

Upvotes: 14

Related Questions