Question

I have such problem. I’m working with project, but when I copy the same files from server it looks different – some Bootstrap styling is not overrided.

Here is screenshots of working site header:

and what I see when opening THE SAME PROJECT on my computer:

I looked in Firebug and I see, that active link use this default Bootstrap styling:

  .navbar .nav > .active > a,
  .navbar .nav > .active > a:hover,
  .navbar .nav > .active > a:focus {
  color: #555555;
  text-decoration: none;
  background-color: #e6e6e6;
 -webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
 -moz-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
 box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
}

So, as I see it is not overriding – WHY?

Answer 1

Try this: You should have a .scss (or .sass?) file to gather all the components. In MY case it is called styles.scss

The order in which the elements appear in this file is important – as the first entries overwrite the later ones – in case of variables! But put your styling(!) changes after your bootstrap entry.

My styles.scss file looks like this:

// myVars
@import "myvariables"; // My vars first to overwrite

// This file is a starting point for the project
@import "bootstrap";

// Include my layout tweeks
@import "assets/layout-tweaks";
@import "assets/hero-swapper";
@import "assets/someotherelement";

// Include responsive Bootstrap styles
@import "bootstrap-responsive";