To disable a tab, we can remove the attribute : data-toggle=”tab” from the tab part enclosed under ‘a’ element.
Further we can add the class .disabled to the parent list item element to make it look visually disabled. (like class=”disabled” inside list item)
To show a case of disabling tabs, first, we go through an example with tabs enabled.
And here is the unordered list section to demonstrate tab disabling, for a direct comparison:
Considering the code for the toggle-able tabs above, below is an example of disabling one tab, making one tab visually disabled and both disabling a tab and making it look visually disabled:
In the code for disabling tabs, we did not alter the first list item (with text ‘Algo’), (to show a case of tabs enabled) and hence it is both clickable/toggle-able and appears without any visual hindrance.
For the second list item (with text ‘DS’) we removed the ‘ data-toggle=”tab” ‘ part and hence this tab becomes non-toggle-able and nothing happens if we try to click it.
For the third list item (with text ‘Languages’) we add class .disabled (class=”disabled”) to our list item so that it becomes visually disabled, i.e. shows a disabled icon when we hover our cursor over it.
However, note that since ‘ data-toggle=”tab” ‘part inside ‘a’ is still there, this tab is toggle-able and can be clicked.
For the fourth list item (with text ‘Interview’) we add disabled class inside list item and also remove the ‘ data-toggle=”tab” ‘ part. This makes the tab both non-toggle-able/click-disabled (when we click) and visually disabled. This would be the case of making it completely disabled.
- Bootstrap (Part-5) | DropDowns and Responsive Tabs
- How to disable a link using only CSS?
- How to disable text selection highlighting using CSS?
- How to disable resizable property of textarea using CSS?
- How to disable zoom on a mobile web page using CSS?
- Include Bootstrap in AngularJS using ng-bootstrap
- jQuery | disable/enable an input element
- How to disable browser Autocomplete on web form field/input tag?
- Opening google search results simultaneously in new tabs in Chrome
- Bootstrap 4 | Alerts
- Bootstrap | Scrollspy
- Bootstrap 4 | Images
- Bootstrap 4 | Forms
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.