Can't override CSS in bootstrap
Question
Like the title says, my custom CSS isn't overriding the core CSS in bootstrap. I'm following this tutorial and trying to add a larger margin beneath the navbar with no luck. I'm also using Django, here's my html file:
{% load staticfiles %}
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="{% static 'css/bootstrap-override.css' %}">
<link rel="stylesheet" href="{% static 'css/bootstrap-theme.css' %}">
<script src="{% static 'jquery/3.1.1/jquery.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Client Sign-In</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">About</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Services<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Design</a></li>
<li><a href="#">Development</a></li>
<li><a href="#">Consulting</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
<h1>Enter ID</h1>
<form method="POST" class= "post-form"> {% csrf_token %}
{{ form.as_p }}
<button type='submit' class="save btn-default">Save</button>
</form>
{% if messages %}
<ul class="messages">
{% for message in messages %}
<li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li>
{% endfor %}
</ul>
{% endif %}
<div class="container">
<div class="row">
<div class="col-md-4">
<span class="glyphicon glyphicon-cloud" aria-hidden="true"></span>
<h3>Personal Training</h3>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
</div>
<div class="col-md-4">
<span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>
<h3>Physiotherapy</h3>
<p>Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Lorem ipsum dolor.</p>
</div>
<div class="col-md-4">
<span class="glyphicon glyphicon-console" aria-hidden="true"></span>
<h3>Boxing</h3>
<p>Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
</div>
</div>
</div>
</script>
</body>
</html>
My custom CSS file is bootstrap-override.css and it's contents are:
.navbar {
margin-bottom: 30;
}
I've tried switching around <link rel="stylesheet" href="{% static 'css/bootstrap-override.css' %}"> and <link rel="stylesheet" href="{% static 'css/bootstrap-theme.css' %}"> when I have the former on top and try inspecting the element in Chrome it's showing me that .navbar {margin-bottom: 30px;} is crossed out, meaning that it's being overriden right? (There's also a little icon next to it that says invalid property value ) Which is the opposite of what I want. When I switch them around so that my custom file is on bottom .navbar {margin-bottom: 30px;} is still crossed out. I have my STATIC-URL variable set to /static/ in settings.py. It doesn't seem like this is a project structure issue because the Chrome console is recognizing my custom code.
2 answers
solution1
2 ACCPTED 2016-12-18 05:02:36
It might say "invalid property value" because 30 is not a unit - it should be 30px .
If that's still not overwriting, you have a few options.
First, the CSS rule in Bootstrap may have a higher level of specificity - you should check in the browser Dev Tools to see what the original selector is that's applying the margin you're trying to overwrite. For example, nav.navbar is more specific than .navbar and will match with higher priority even if it comes earlier in the CSS.
If all else fails, make the rule important (though this is usually to be avoided and is strictly for tricky overrides):
.navbar {
margin-bottom: 30px !important;
}
solution2
1 2016-12-18 05:06:26
did you forget writing px after 30?
.navbar {
margin-bottom: 30px;
}
or you could also try
.navbar {
margin-bottom: 30px !important;
}
If it still doesn't work, it means your css file is linked incorrectly.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.