Cannot override default Bootstrap style

Question

So, I'm using Bootstrap 3 and I have nav-tabs element for the menu. In the bottom of the nav-tabs is sort of a border which is default in Bootstrap. I tried to change the color or even delete it but none of these is working.

I tried to override tthe property in the Bootstrap which in the source code looks like this:

.nav-tabs { border-bottom: 1px solid #ddd; }

Maybe this is not the correct selector of that border , so this could also be a problem.

Here is the fiddle of project: http://jsfiddle.net/eenho5dw/

Answer 1

You need to use this selector:

.nav-tabs.nav-justified>li>a {
   border-bottom: 1px solid #000;
}

http://jsfiddle.net/eenho5dw/3/

Answer 2

Demo http://jsfiddle.net/eenho5dw/6/

You need to target the correct elements:

.nav-tabs.nav-justified > li > a {
    border-bottom: 1px solid #0f0;
}

Answer 3

Try -

.nav-tabs { border-bottom: 1px     solid #ddd !important; }

Even if it doesn't work, try adding internal style if possible (recommended, if have to apply css to one or few pages).

Answer 4

Please use this style

  .nav-tabs {
   border-bottom: 1px solid #000 !important;
   }