How to disable tabs in Bootstrap ?

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


And here is the unordered list section to demonstrate tab disabling, for a direct comparison:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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.



My Personal Notes arrow_drop_up

Game Design | Cryptography | Web Development

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.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.