Answer a question

I'm learning Flask and I have this basic web application. I'm using Bootstrap 5 and I noticed that if I load the Bootstrap stylesheet my custom CSS does not work (if I remove Bootstrap stylesheet it works fine).

I have this folder structure:

flaskWebsite
         |
         |__pycache__
         |
         |templates
                 |index.html
                  ...
         |static
               |
               |main.css
               |main.js
         |venv 
         |
         |app.py

Here is some relevant code:

app.py

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

index.html

<head>
        <title>Home</title>
        <!--Custom CSS-->
        <link rel="stylesheet" href="{{url_for('static', filename='main.css')}}">

        <!-- Latest compiled and minified Bootstrap CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    </head>

I tryed to put bootstrap.min.css (downloaded from Bootstrap) into the static folder, but it doesn't change.

Can anyone explain me why does this happen and how can I fix it?

Answers

It is called precedence, whenever you have multiple stylesheets in the same html file, if some of them contain elements with the same specificity, the last one will be applied. In your case, Bootstrap css is probably overriding your custom css. Try placing custom css after bootstrap one like this:

<head>
        <title>Home</title>

        <!-- Latest compiled and minified Bootstrap CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <!--Custom CSS-->
        <link rel="stylesheet" href="{{url_for('static', filename='main.css')}}">
</head>
# python # xhtml # scss # flask
Logo
Python

Python社区为您提供最前沿的新闻资讯和知识内容

更多推荐

cover

求助！为什么用InsCode部署会出现无限重定向？

avatar Python

如何重塑熊猫。系列

问题:如何重塑熊猫。系列 在我看来,它就像 pandas.Series 中的一个错误。 a = pd.Series([1,2,3,4]) b = a.reshape(2,2) b b 有类型 Series 但无法显示,最后一条语句给出异常,非常冗长,最后一行是“TypeError: %d format: a number is required, not numpy.ndarray”。 b.sha

avatar Python

在哪里可以找到有关 Keras 中默认权重初始化器的文档? [复制]

问题:在哪里可以找到有关 Keras 中默认权重初始化器的文档? [复制] 我刚刚在这里](https://keras.io/initializers/)中阅读了有关[中的 Keras 权重初始化器的信息。在文档中,只介绍了不同的初始化程序。如: model.add(Dense(64, kernel_initializer='random_normal')) 当我没有指定kernel_initia

avatar Python