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

Please add some code. Also you folder structure doesn't make sense. Could you edit that ? — Ram
– Ram, Commented Jul 17, 2021 at 14:54

Malware · Accepted Answer · 2021-07-17 16:14:08Z

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, 2021 at 16:14

Malware

914 bronze badges

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

2 Comments

ganeshsp Over a year ago

you are a champion! it worked :) thanks very much

Malware Over a year ago

No Problem! I'm happy that I could help you! :)

ganeshsp · Accepted Answer · 2021-07-17 16:35:32Z

1

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

answered Jul 17, 2021 at 16:35

ganeshsp

437 bronze badges

Collectives™ on Stack Overflow

flask not reading bootstrap.css during runtime (mac)

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related