Menu
How to customize the colour of the borders of nav-tabs which is by default light grey? I could change the colour content div: http://jsfiddle.net/cjz9dyen/
I tried that:
.nav-tabs > li.active > a {
border-color: #d45500;
}
But it adds a border on the bottom.
622
This property is commonly used to change the styles of the tab bar, for example, by applying the backgroundColor styles' property. To remove the border, add the tabBarOptions prop and inside it, add a style property called borderTopWidth with a value 0 .
You can do this by adding styles to tab-pane. Let's add a style class to div with style class “tab-content” call “my-tab.” This new style class will override the default class properties. Now you can add the following line of code to CSS.
You can always modify your navigation list through css. Use this css code instead, in that way use you use the a tag to change the color and its background-color. It's improper to use the li tag to set the background only and a tag to set the color of the text.
Override the border-bottom-color too:
.nav-tabs>.active>a, .nav-tabs>.active>a:hover, .nav-tabs>.active>a:focus {
border-color: #d45500;
border-bottom-color: transparent;
}
.nav-tabs {
border-bottom: 1px solid #d45500;
}
http://www.bootply.com/gjjXWz6eOZ
71
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
