[FIXED] Using flask_bootstrap and cant seem to over ride CSS,

Issue

I can't seem to get the CSS to override the bootstrap CSS. I have done a very clear change while trying to get it to work by changing the body background color.

My working dir

End result

This is my Main.py

from flask import Flask, render_template
from flask_bootstrap import Bootstrap
from flask_wtf import FlaskForm
from wtforms import PasswordField, StringField, SubmitField
from wtforms.validators import InputRequired, Length

app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret key'
Bootstrap(app)


class LoginForm(FlaskForm):
    username = StringField(label="Username", validators=[InputRequired()])
    password = PasswordField(label="Password", validators=[InputRequired(), Length(8)])
    submit = SubmitField(label="Login")


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


@app.route("/login", methods=['GET', 'POST'])
def login():
    login_form = LoginForm()
    return render_template("login.html", form=login_form)


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

This is the HTML for the login page.

{% extends "bootstrap/base.html" %}
{% import "bootstrap/wtf.html" as wtf %}

{% block styles %}
{{super()}}
  <link rel="stylesheet" type="text/css" href="{{url_for('.static', filename='static/css/mystyle.css')}}">
{% endblock %}


{% block content %}
<div class="container">
    <h1>Login</h1>
    {{ wtf.quick_form(form) }}
</div>
{% endblock %}

And this is my CSS

body {
  background-color: lightblue;
}

.middle {
  align-items: center;
  height: 100%;
}

Solution

The static endpoint expects a path (filename value) relative to the root of the static folder. Just remove the leading static/ part in your path:

{{ url_for('static', filename='css/mystyle.css') }}

And no need to add a dot before the endpoint.

Answered By - Grey Li