How to extend boot classes

I am taking the first steps with Bootstrap Twitter and you need to expand the components. For example, I would like to change the background of the navbar, but without changing the source css file.

I tried to create a new .test class with a new background:

 .test{ background-color: red !important; } 

And I used it in hmtl like:

  <div class="navbar navbar-fixed-top test"> 

But that will not work. How can I do that?

+6
source share
1 answer

There are several ways to configure / extend Bootstrap classes, which are discussed here: Twitter Best Boots

If you intend to override buffering styles with your own CSS, you should avoid using !important since this is usually bad practice.

In the case of navbar an element that has a background color is navbar-inner so you want to override it like this:

 .test .navbar-inner{ background-color: red; } 

User Navigator Example: http://bootply.com/61032


How to extend / change (configure) Bootstrap 4 using SASS

+7
source

Source: https://habr.com/ru/post/948248/


All Articles