Skip to content
Related Articles

Related Articles

How to disable tabs in Bootstrap ?
  • Difficulty Level : Medium
  • Last Updated : 16 Jul, 2019
GeeksforGeeks - Summer Carnival Banner

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.




<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:




<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:






<!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 Agorithms
                  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.

Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.

My Personal Notes arrow_drop_up
Recommended Articles
Page :