How to disable tabs in Bootstrap ?
Last Updated :
24 Jun, 2021
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.
html
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Algo</a></li>
<li><a data-toggle="tab" href="#menu1">DS</a></li>
<li><a data-toggle="tab" href="#menu2">Languages</a></li>
<li><a data-toggle="tab" href="#menu3">Interview</a></li>
</ul>
|
And here is the unordered list section to demonstrate tab disabling, for a direct comparison:
html
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Algo</a></li>
<li><a href="#menu1">DS</a></li>
<li class ="disabled"><a data-toggle="tab" href="#menu2">Languages</a></li>
<li class="disabled"><a href="#menu3">Interview</a></li>
</ul>
|
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:
Example:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
href=
<script src=
</script>
<script src=
</script>
</head>
<body>
<div class="container"
style="color:green">
<h2>GeeksforGeeks</h2>
<ul class="nav nav-tabs">
<li class="active">
<a data-toggle="tab" href="#home">Algo</a>
</li>
<li><a href="#menu1">DS</a></li>
<li class="disabled">
<a data-toggle="tab" href="#menu2">
Languages
</a>
</li>
<li class="disabled">
<a href="#menu3">
Interview
</a>
</li>
</ul>
<div class="tab-content">
<div id="home"
class="tab-pane fade in active">
<h3>Algo</h3>
<p>Here you can find all sorts of Algorithms
with explanation and problems based on them!
</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>DS</h3>
<p>Here you can find all sorts of Data
Structures explained and problems wherein
we need to use those!</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Languages</h3>
<p>Here you can find all different scripting/query
languages!
</p>
</div>
<div id="menu3" class="tab-pane fade">
<h3>Interview</h3>
<p>Here, you can find 'Interview Experiences'
for all the companies!
</p>
</div>
</div>
</div>
</body>
</html>
|
Output:
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.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...