Open In App

How to make bootstrap version 2 tab dropdown?

Improve
Improve
Like Article
Like
Save
Share
Report

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:




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


Output



Last Updated : 05 Aug, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads