How to use bootstrap locally with flask

Question

I did my best to try to use bootstrap locally with flask on a computer (without internet connection). My folders are like that : Templates

-layout.html
-bootstrap
    -css
        -bootstrap.min.css
    -js
        -bootstrap.min.js
        -jquery-3.2.1.slim.min.js
        -popper.min.js

And in my layout.html file, I use bootstrap with these lines :

<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"

in the head tag and

<script src="bootstrap/js/jquery-3.2.1.slim.min.js"></script>
<script src="bootstrap/js/popper.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>

in the body tag. If I launch just this html file, the bootstrap is working but if I use this template in my app.py file like that :

@app.route("/")
@app.route("/home/")
def home():
    return render_template("layout.html")

The bootstrap isn't working... Thank you in advance for your help.

score 5 · Accepted Answer · answered Apr 17 '20 at 11:47

5

Store the entire bootstrap folder in a directory named static then use <link rel='stylesheet' href='/static/bootstrap/css/bootstrap.min.css>

answered Apr 17 '20 at 11:47

DevHyperCoder

895
1
9
22

1

Unfortunately it's still not working... (I changed its to href='static/bootstrap/css/bootstrap.min.css' and like this it works if I open the layout.html but not with using flask...) – Cheen Apr 17 '20 at 12:14
1

Is your layout.html file in the templates folder – DevHyperCoder Apr 17 '20 at 12:25
1

yes it is in the templates folder – Cheen Apr 17 '20 at 12:26
1

Btw the static folder shouldn't be in templates folder – DevHyperCoder Apr 17 '20 at 12:30
1

Any idea what to do now if i want to use js as it's not static ? like bootstrap.min.js or popper.min.js... – Cheen Apr 17 '20 at 13:03
1

Js should be in the static folder – DevHyperCoder Apr 17 '20 at 13:07
1

Oh okay it works but it seems strange to me to put it in a static file as it's not used for statics tools. Thank you very much – Cheen Apr 17 '20 at 13:08
1

https://stackoverflow.com/a/49842914/11716841 check this out – DevHyperCoder Apr 17 '20 at 13:17

How to use bootstrap locally with flask

1 Answers1