Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap inverse (dark) style for tabs

For navbars, we have a navbar-inverse class. Is there anything like that for tabs in bootstrap? Here is my code:

<ul class="nav nav-tabs">
    <li><a href="#">Tab item</a></li>
</ul>

Any help would be appreciated.

like image 791
Rishi Avatar asked May 15 '17 15:05

Rishi


People also ask

How do I change the background color of a tab in bootstrap?

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.

How do I style a bootstrap tab?

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.

How do I disable a tab in CSS?

To disable a tab, we can remove the attribute : data-toggle=”tab” from the tab part enclosed under 'a' element. To show a case of disabling tabs, first, we go through an example with tabs enabled.

How do I create a navigation tab in bootstrap?

To make the tabs toggleable, add the data-toggle="tab" attribute to each link. Then add a .tab-pane class with a unique ID for every tab and wrap them inside a <div> element with class .tab-content .


1 Answers

No, there is nothing in Bootstrap 3.x for that, so you'd have to add custom CSS.

In Bootstrap 4, navbar-inverse has changed to navbar-dark which is still used for Navbar styling, but not for Navs (like nav-tabs). However, there are utility classes for text and bg colors. So, you could set the nav colors like this...

<ul class="nav nav-tabs bg-dark">
    <li><a href="#" class="nav-link text-light">Tab item</a></li>
</ul>
like image 190
Zim Avatar answered Oct 30 '22 00:10

Zim