{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 疯言疯语 的问题《custom css not working when using bootstrap with f》','https://www.manongdao.com/q-1266894.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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.
You set the
colorof you body, which is the text color, you wanted to set the background color which isbackground-color. if that still doesn't work, disable the other style sheets, they may be doing something with higher precedence thanbody(which is the lowest one)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.