Import Bootstrap with Flask

Question

I've tried to import bootstrap an archive but i've face this error: "GET /bootstrap.css HTTP/1.1" 404

While when I use this tag link it works perfectly.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

It is possible to import bootstrap as a file while using Flask? If don't, I would like to know why, please

html:
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="bootstrap.css">
    <title>{% block title %}{% endblock %}</title>
</head>
<body>
    <h1>Hello User</h1>
    {% block content %}
    {% endblock %}
</body>
</html>

python:
from flask import Flask, url_for, redirect, render_template
app = Flask(__name__)

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

if __name__ == "__main__":
    app.run(debug=True)

score 2 · Answer 1 · answered Jul 30 '20 at 21:57

2

You can try to link the bootstrap using the link tag that they give you in the docs instead of having a file.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

answered Jul 30 '20 at 21:57

SSBHAV01

31
3

Thank you! I've rewrote the question to a better understanding of the problem – devinho Jul 30 '20 at 22:06

score 1 · Answer 2 · answered Jul 30 '20 at 23:27

1

Put bootstrap.css in your static directory, then:

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

answered Jul 30 '20 at 23:27

GAEfan

11,244
2
17
33

score 1 · Accepted Answer · answered Jul 31 '20 at 05:10

First thing first, by answering your question: It is possible to import bootstrap as a file while using Flask? If don't, I would like to know why:

Yes it is, you just did it but you only have to link insert this css file in the right place and point it with the right command. Once is downloaded is just like any other CSS file.

For my understanding you have imported the bootstrap by downloading the 'Compiled CSS and JS' from this here ===> https://getbootstrap.com/docs/4.5/getting-started/download/

Assuming that your Boostrap file in within a 'Static' folder and then inside a 'style' as so:

/app
- app.py
/views
    - view.py 
/templates
    - index.html
/static
       /style
           - bootstrap.css

This both will work for you:

(most common usage)

`<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style/bootstrap.css') }}">`

Example number one depends where in the directory the .html is at, in this example it would be just below templates and is 'index.html

<link rel="stylesheet" type="text/css" href="../static/style/bootstrap.css">

The most important thing is that the css file is in the static folder and it must be correctly pointed at.

Some more reference of really good answer about this topic:

Application not picking up .css file (flask/python):

Note that you can override the static folder path:

app = Flask(__name__, static_url_path="/STATIC_FOLDER", static_folder='STATIC_FOLDER')

Great explanation Federico! Thank you – devinho Jul 31 '20 at 13:04 — devinho, Jul 31 '20 at 13:04

Import Bootstrap with Flask

3 Answers3