How to make bootstrap version 2 tab dropdown?

Using a simple Bootstrap plug-in, you can add dropdown menu in tabs by using the dropdown class. The nav and nav-tabs classes are also used to achieve this. 

First, make an unordered list and give it a class of nav and nav-tabs. Now, give a class of dropdown to the list item tag which you wish to behave as a dropdown. 

The next step is to create an unordered list for the dropdown tab and giving it a class of dropdown-menu. 

You can also customize the dropdown menu and the nav links by writing your own CSS and overriding Bootstrap’s CSS. Here’s a working example for the same.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
<head>
<title> Welcome to GFG </title>
      
<style>
  
.main {
margin-top: 20vh;
margin-left: 10vw;
}
  
.tab-pane {
    width:100%;
    background-color:#b6b0d2;
    padding:10px;
    color: black;
}
  
  
.nav-tabs > li a { 
    border: 2px solid black;
    background-color:#35218e; 
    color:#fff;
    margin-right: 1.2vw;
}
  
.nav-tabs > li.active > a {
  
    background-color:#b6b0d2;
    color:#000;
    border: 1px solid #35218e;
      
}
  
.nav-tabs > li.active > a:focus {
background-color: #c9bad1;
color:#000;
  
.nav-tabs > li > a:hover {
    background-color: #b6b0d2 ;
  
}
  
</style>
  
  
</head>
  
<body>
<div class="container main">
  
<ul class="nav nav-tabs" role="tablist">
<li class="active homeTab">
    <a href="#home" 
    role="tab" 
    data-toggle="tab">Home</a></li>
  
<li ><a href="#section1" 
        data-toggle="tab" 
        role="tab">Section1</a></li>
<li ><a href="#section2" 
        data-toggle="tab" 
        role="tab" >Section2</a></li>
  
<li class="dropdown">
            <a class="dropdown-toggle"
               data-toggle="dropdown">
                Section4 <b class="caret">
                      
                </b></a>
            <ul class="dropdown-menu">
                <li><a href="#subSection1" 
                       role="tab" 
                       data-toggle="tab">
                    Sub-section 1</a></li>
                <li><a href="#subSection2" 
                       role="tab" 
                       data-toggle="tab">
                    Sub-section 2</a></li>
                <li><a href="#subSection3" 
                       role="tab"
                       data-toggle="tab">
                    Sub-section 3</a></li>
            </ul>
</li
  
<li class="dropdown">
            <a class="dropdown-toggle" 
               data-toggle="dropdown">
                Section4 <b class="caret">
                      
                </b></a>
            <ul class="dropdown-menu">
                <li><a href="#subSection1" 
                       role="tab" 
                       data-toggle="tab">
                    Sub-section 1</a></li>
                <li><a href="#subSection2" 
                       role="tab" 
                       data-toggle="tab">
                    Sub-section 2</a></li>
                <li><a href="#subSection3" 
                       role="tab" 
                       data-toggle="tab">
                    Sub-section 3</a></li>
            </ul>
</li
  
  
  
<div class="tab-content">
<div class="tab-pane active" id="home">
    Bootstrap is a free and open-source tool
    collection for creating responsive websites
    and web applications. It is the most popular
    HTML, CSS, and JavaScript framework for 
    developing responsive, mobile-first web sites.
    Nowadays, the websites are perfect for all
    the browsers (IE, Firefox and Chrome) and for
    all sizes of screens (Desktop, Tablets,
    Phablets, and Phones). All thanks to 
    Bootstrap developers – Mark Otto and Jacob
    Thornton of Twitter, though it was later 
    declared to be an open-source project.
    </div>
<div class="tab-pane" id="section1"
Bootstrap is a free and open-source tool
    collection for creating responsive websites
    and web applications. </div>
<div class="tab-pane" id="section2"
Bootstrap is a free and open-source tool
    collection for creating responsive websites
    and web applications.</div>
  
<div class="tab-pane" id="section3"
Bootstrap is a free and open-source tool
    collection for creating responsive websites
    and web applications.</div>
  
<div class="tab-pane" id="subSection1">
    Sub section1 content</div>
<div class="tab-pane" id="subSection2">
    Sub Section 2 content
  
</div>
  
</div>
  
</body>
</html>                    

chevron_right


Output




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

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.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.