11

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?

Adriano
  • 3,363
  • 4
  • 32
  • 46
ramiromd
  • 1,948
  • 7
  • 32
  • 58
  • Did my answer work? I see that you've asked another Bootstrap CSS override question: http://stackoverflow.com/questions/17355943/change-vertical-divider-navbar – Zim Jun 28 '13 at 02:02
  • You should accept the answer so others know it's resolved. – Zim Feb 15 '17 at 15:25

1 Answers1

10

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

How to extend/modify (customize) Bootstrap 4 with SASS

Zim
  • 329,487
  • 83
  • 671
  • 600
  • > There are 2 few ways… Did you mean "There are 2 ways…" or "There are too few ways…"? Just checking so I understand this answer correctly. – samjewell Nov 28 '16 at 10:12