I am doing my first steps with Bootstrap Twitter, and need to extend components. For example, I would like to change the navbar background, but without changing the original css file.
I tried to create a new class .test with the new background:
.test{
background-color: red !important;
}
And I've invoked it in the hmtl as:
<div class="navbar navbar-fixed-top test">
But, it doesn't work. How can do this?
There are a few ways to customize/extend Bootstrap classes which are all discussed here: Twitter Bootstrap Customization Best Practices
If you intend to override the boostrap styles with your own custom CSS you should avoid using !important as this is generally a bad practice.
In the case of the navbar, the element that has the background-color is navbar-inner so you'd want to override like this:
.test .navbar-inner{
background-color: red;
}
Custom navbar example: http://bootply.com/61032