custom css not working when using bootstrap with flask

Question

I was trying to develop my website using bootstrap and backend as flask. But it seems when I am applying css to my element its not working. I have posted a minimal reproducible problem to my question.

Here is my directory structure

My main.py file

from flask import Flask, render_template
app = Flask(__name__)

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

My layout.html file

<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">

  <title>Python For Everybody</title>

<!-- Custom styles for this template -->
  <!-- bootstrap css-->
  <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap/bootstrap.min.css') }}"/>
  <!-- Custom fonts for this template -->
  <link href="https://fonts.googleapis.com/css?family=Raleway:500" rel="stylesheet" />
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous" />


  <!-- add custom css file here-->
  <link rel="stylesheet" href="{{ url_for('static', filename='css/custom.css') }}">
</head>

<body>


    <!-- Navigation -->
    <header>
      <nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand ml-5" href="#">Python For Everything</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse justify-content-end mr-5" id="navbarSupportedContent">
  <ul class="nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Courses</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">About</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">Login/Register</a>
    </li>
  </ul>

</div>
</nav>
</header>


    {% block body %}

    {% endblock %}

  <!-- Bootstrap core JavaScript -->
  <script src="{{ url_for('static', filename='js/jquery.min.js') }}"></script>
  <script src="{{ url_for('static', filename='js/bootstrap/bootstrap.min.js') }}"></script>

  <!--add custom js file here-->
</body>

</html>

My dashboard.html file which I am rendering on request

{% extends "layout.html" %}
{% block body %}
<br>
<h1>Hello World</h1>
<br>
{% endblock %}

This is my css file custom.css though it contained many elements I am posting a minimal version of it.

/* to avoid overlapping of navbar*/
body {
  color: #ffff00;
  padding-top: 70px;
}

If you find any trouble reproducing this issue I am also uploading the entire file structure here

What was expected :

The background color of dashboard.html to be of yellow color and with some padding at the top.

Note : Please note that I have tried all possible answers that I was getting as suggestion to this question and none of them worked for me.

I have done the same thing as mentioned in the answer but that did not help. Can you please try executing this once on your machine. I have provided the file structure in my drive. Please check at the bottom — Himanshu Poddar, May 06 '19 at 13:24
i cannot run this at the moment. does the bootstrap css load? go use dev tools on your browser(f12) and check the network, see if it loads any of the style sheets — Nullman, May 06 '19 at 13:31
yes it does loads both the files bootstrap as well as the custom css. And that is why it bothers me as to where am I going wrong — Himanshu Poddar, May 06 '19 at 13:34
if the file loads then this is a front-end issue and not flask/python, i cannot help you. check for interaction between your css and bootstrap, maybe check your js — Nullman, May 06 '19 at 13:44
Have you checked that this was not related to the cache memory of your browser? — Tobin, May 06 '19 at 14:03
you are loading other css files as well, and body has the LOWEST precedence, so if your other css files are changing your tags with anything more specific than body, your css will not be used at all. also why are you using `color` and not `background-color` ? — Nullman, May 06 '19 at 14:16

score 2 · Answer 1 · answered Oct 13 '19 at 10:20

I came across a similar problem and through the help of the responses given here and in other similar question asked by other programmers, i discovered that the css file was being saved in chrome's cache memory (or any chromium based browser). So I'm presuming you are using a chromium based browser.

For the changes in the css file to be reflected on the browser, the cache has too be cleared. You can do this manually clearing the cache memory each time you make a change on your css file, this option can be found in the chrome settings, or the chromium browser you are using. Alternatively, you can prevent files from being cached through the developer tools. I found a website that can help with that.

Mozilla firefox works in a different manner and I didn't experience any cache memory problem while working with it. You can also use it to solve this particular problem. I haven't tried safari, so you can check it out and see if it works for you.

Ok I have heard many time about chromium, but never tried to know, can you tell me is chromium related to the chrome and what are chromium based browsers — Himanshu Poddar, Oct 13 '19 at 12:42
[Chromium](https://www.chromium.org/Home) is an open-source web browser developed by google, which supplies a majority of code used in chrome. By chromium based browsers, I mean browsers that are built on chromium which include [opera](https://www.opera.com), [microsoft edge](https://www.microsoftedgeinsider.com), [torch](https://torchbrowser.com/) and many others. — Timothy Oliver, Oct 14 '19 at 05:11

score 1 · Accepted Answer · answered May 06 '19 at 14:22

1

You set the color of you body, which is the text color, you wanted to set the background color which is background-color. if that still doesn't work, disable the other style sheets, they may be doing something with higher precedence than body (which is the lowest one)

answered May 06 '19 at 14:22

Nullman

4,179
2
14
30

Thanks for your response Nullman but I tried what Tobin said and it worked. It was a problem related to cache memory. Although I knew the concept of cache but cache memory should cache the entire page why did it cache only the css part because when I tried changing text or any other thing on my website the change was reflected on the page also. Since the css change were not appearing on the website so I did not bother to check with my cache memory. Can you tell me the reason why was it caching only css but not html content – Himanshu Poddar May 06 '19 at 14:29
use ctrl R to refresh caching in Chrome – koul May 06 '19 at 20:38

score 0 · Answer 3 · answered Jan 21 '21 at 09:00

0

As pointed out in this answer:

Flask has as max-age value 12 hours. You can set it to 0 using this code:
app = Flask(__name__)
app.config['SEND_FILE_MAX_AGE_DEFAULT'] = 0
Refer to its documentation for details.

answered Jan 21 '21 at 09:00

G M

20,759
10
81
84

custom css not working when using bootstrap with flask

3 Answers3

Linked