How to disable tabs in Bootstrap ? - GeeksforGeeks

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="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">    <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">  </script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js">  </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. 
abhishek0719kadiyan
Bootstrap-Misc
Picked
Bootstrap
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to pass data into a bootstrap modal?
How to Show Images on Click using HTML ?
How to set Bootstrap Timepicker using datetimepicker library ?
How to Use Bootstrap with React?
How to change the background color of the active nav-item?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills