How to disable Bootstrap tab with 2 demos

The tabs in Bootstrap can be created by using the data attribute data-toggle=”tab”.  You also need to use the role=”tab” attribute.

Sometimes, you may need to disable a specific tab as using the Bootstrap framework, for example in the checkout process. For that, simply remove the data-toggle=”tab” attribute from the <a> tag inside the <li> tag.

For symbolically showing it as disabled, you may add the disabled CSS class in the <li> tag containing that tab. See the demo and code in following examples.

A demo of disabling a tab

In this example, four tabs are created as follows:

• Home
• Java
• C#
• MySQL
• jQuery

The Java tab is disabled as follows:

See online demo and code

The Code

Another example with custom CSS

In this example, the C# tab is disabled as creating the Bootstrap tabs. The second tab is active as the demo page loaded:

See online demo and code

The markup for this example:

You can see, the C# tab is disabled by removing the data-toggle=”tab” data attribute. The disabled class is added in the <li> tag. You can see the complete code including custom CSS overriding the default classes in the demo page.