flask not reading bootstrap.css during runtime (mac)

Question

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="/static/bootstrap.css">
    <title>Document</title>
</head>
<body>
    <div class="container">
    <form method = "post" enctype="multipart/form-data">
        <h2>Choose your State</h2>
        {{form.state_variable}}
        <h2>Choose your District</h2>
        {{form.district_variable}}
        <br>
        <br>
        <br>
        <input type="submit" name="submit" value="submit"/>  
    </div>
</body>
</html>

I'm new to creating web apps through flask and html. I created a very simple page that takes input from the html file and displays a table in another html. My python flask and html both are running fine. I wanted to add some bootstrap.css, so tried adding the div class=container to the html page using visual studio code. I previewed it with the 'Live Server' in visual studio code and it works fine. However, when I start the local server to work with flask, at that time bootstrap css is not getting applied. What I see is a barebone html page without styles being applied. All functionalities works fine though. Any help will be much appreciated. Thanks.

Error Message: "GET /css/bootstrap.css HTTP/1.1" 404 -

Note: I'm not sure why the code is looking for "/css/" folder while I have clearly put my css file in the static folder and referenced it

have you checked https://stackoverflow.com/questions/13772884/css-problems-with-flask-web-app? — Epsi95, Jul 17 '21 at 14:53
Please add some code. Also you folder structure doesn't make sense. Could you edit that ? — Ram, Jul 17 '21 at 14:54

score 2 · Answer 1 · answered Jul 17 '21 at 16:14

2

You need to replace href="/static/bootstrap.css" and replace it with:

href="{{url_for('static', filename='bootstrap.css')}}"

You need to do that, because you write in flask like this. Normally you would do it like you did it. Feel free to tell me any errors

answered Jul 17 '21 at 16:14

Malware

89
4

you are a champion! it worked :) thanks very much – ganeshsp Jul 17 '21 at 16:26
No Problem! I'm happy that I could help you! :) – Malware Jul 19 '21 at 12:52

score 1 · Answer 2 · answered Jul 17 '21 at 16:35

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="{{url_for('static', filename='bootstrap.css')}}">
    <title>Document</title>
</head>

the above change to href as suggested by the user 'malware' helped resolve this.

I also commented the below line in my python code as that doesn't seem to be the problem

#app._static_folder = '<path>'

flask not reading bootstrap.css during runtime (mac)

2 Answers2