Why Bootstrap CSS is not overriding in other proje

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

You can do common css file, where you'll import bootstrap css and other custom css in desired order. And in layout you will need to include only this common css file.

Answer 2

Your styles are probably not overriding because you need to override several instances of a property.

You haven't provided us with any of the code you are trying to override with, so I can't say for sure, but in the above code, you can't just override box-shadow but -webkit-box-shadow etc.

This is much easier to do when working with the source LESS files from Bootstrap's Github project where you can define this as

.box-shadow(1px 1px 5px #e1e1e1);

And it will automatically write out all of these properties for box-shadow.

Here are Bootstrap's instructions on how to do this: http://twitter.github.com/bootstrap/extend.html

There's also Kickstrap, which is already set up to do this. It keeps your customizations in a separate layer from Bootstrap so you don't have to touch the source code (also other goodies).

Answer 3

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";