-1

I am new to web development,and I was building my first website with Flask.When I first runned the website,Bootstrap was not working,after that I went in inspect mode and it gave me some errors.

errors

I tried emptying the cache,but it did not change anything.

The projects folders are arranged like this: folders

This is the HTML code:

<!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" href="css/bootstrap.css">
    {% if title %}
    <title> Project--{{Title}} </title>
    {% else %}
    <title> Project </title>
    {%endif%}
</head>
<body>
    <div class="alert alert-primary" role="alert">
        Hello
      </div>
    <script src="js/bootstrap.js"></script>
</body>
</html>

The python code:

from flask import Flask,render_template,url_for
app=Flask(__name__,template_folder='Template')
@app.route("/")
def home():
    return render_template('Home.html',title='Home')

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

How can I fix this issue? Thanks in advance!

rawrex
  • 4,044
  • 2
  • 8
  • 24
ILC
  • 1
  • 1

1 Answers1

1

You have to keep js and css folder in a folder named static at same level that of templates folder where you will keep only html files.

You can use href="{{ url_for('static', filename='css/bootstrap.css') }}" for a css file named bootstrap.css which is in css folder in static folder. Same you have to do with us files , src="{{ url_for('static', filename='js/bootstrap.js') }}"

charchit
  • 1,492
  • 2
  • 6
  • 17