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:
<!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
Please Login to comment...