1
  1. Both bootstrap3 and custom css files are loaded locally from the static directory.
  2. Bootstrap is loaded before the custom css file.
  3. When bootstrap link is commented out, custom css rules apply, hence proving that the custom css path is correct.
  4. When both bootstrap and custom css are loaded, most custom css rules do not apply, e.g. changing the navbar's colour.
    • I've been able to make some custom css rules work, not sure how, though. Some rules work just fine, others don't. I guess those rules do not contradict with bootstrap rules.
  5. Tried id tags, class tags, !important, but the issue persists.

Any solutions? What have I done wrong?

The original code is too long, I've made a short example (This time, using Bootstrap CDN links):

#navbar_test {
  background-color: red !important;
  color: blue;
}

#text_test {
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<nav id="navbar_test" class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Brand" src="...">
      </a>
    </div>
  </div>
</nav>

<p id="text_test">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
Carl Binalla
  • 5,393
  • 5
  • 27
  • 46
Zilong Li
  • 889
  • 10
  • 23
  • There has to be an issue elsewhere then. Can you replicate the issue for us to see? – Chris Jul 19 '17 at 02:36
  • You should use !important in your custom css and clear cache from your browser. – MD. ABDUL Halim Jul 19 '17 at 02:39
  • 1
    Can you give the CSS and HTML code of what is or isn't working? – Zachary Weixelbaum Jul 19 '17 at 02:39
  • Try inspecting the element and debugging it from there, we can't help without code. – Chun Yin Jul 19 '17 at 02:45
  • @JoeB. not a duplicate question. I tried !important as I said above, it doesn't work. – Zilong Li Jul 19 '17 at 02:56
  • The linked question/answer provides good explanation on how css rules are weighted. Sometimes it's where you put those tags, not just that you tried those tags. However, without the HTML or CSS we can't offer much more than has already been stated/suggested. – Joe B. Jul 19 '17 at 03:06
  • @JoeB. I've made a short example and edited the answer. The same problem occurs. – Zilong Li Jul 19 '17 at 03:12
  • @ZacharyWeixelbaum I've made a short example and edited the answer. The same problem occurs. – Zilong Li Jul 19 '17 at 03:13
  • @ChunYin In the inspection view, I see custom css rules, but Chrome only displays bootstrap default styles. – Zilong Li Jul 19 '17 at 03:20
  • You can check the specificity used by `Bootstrap` for the `navbar`, then use it in your custom `css` – Carl Binalla Jul 19 '17 at 03:45
  • @ZilongL it appears there is a `background-image` property for the gradient that should be set to none before a change can be made, at least when using the `navbar-default` class. See my answer for an example and some more detail. – Joe B. Jul 19 '17 at 03:53

2 Answers2

2

It appears the key for changing the background in the navbar is associated with background-imagea gradient on the .navbar-default. If you apply none to that property you should get the desired effect. 

.navbar-default{
  background-color: red;
  background-image: none;
}

The other overrides should work normally as you saw with the text color change.

DEMO

Joe B.
  • 1,124
  • 7
  • 14
  • @ZilongL glad to help! I would recommend that in this case since the 'marked' answer didn't answer your question you switch the answer to this one, to help other users that might have a similar question. – Joe B. Jul 19 '17 at 13:01
  • Yeah just did. Might if I ask another newbie question? What is happening when I can override bootstrap using html style attribute, but not a separate css file. I know the css file path is correct since some rules still apply, and that it is loaded after bootstrap and bootstrap theme in the html head. Tried ID tags, no luck. Many thanks in advance! – Zilong Li Jul 20 '17 at 03:03
  • Basically because inline styles > external css sheet. The order of importance is Inline style > internal css > external css > browser default. So that's why that works. The problem you're experiencing has to do with another attribute having a higher importance. So you either have to make your attribute have a higher importance or you can amend the bootstrap css IDs and Classes so there is no need for override. In the example above you could have also not used `.navbar-default`, but rather built your own class called say `.navbar-[your name here]` – Joe B. Jul 20 '17 at 03:38
  • I see. I'll try to modify Bootstrap. Very enlightening. Many Thanks! – Zilong Li Jul 21 '17 at 03:32
-3

you can override the bootstrap css in some elements using !important in your custom css file, like this :

element {
   background-color: red !important;
}
Ali
  • 1