CODEWITHSUNDEEP
pythonhtmlcssflask
ganeshsp
ganeshsp

Reputation: 43

flask not reading bootstrap.css during runtime (mac)

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

Upvotes: 3

Views: 669

Answers (2)

ganeshsp
ganeshsp

Reputation: 43

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

Upvotes: 1

Malware
Malware

Reputation: 89

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

Upvotes: 2

Related Questions