Home Whiteboard Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

Tabs With Dropdown Bootstrap Example

Bootstrap Web Development CSS Framework

To create tabs with Bootstrap, use the .nav and .nav-tabs classes. With that use the .dropdown-menu class.

  • Start with a basic unordered list with the base class of .nav
  •  Add the class .nav-tabs.
  • Now add an unordered list with a .dropdown-menu class.

You can try to run the following code to create tabs with drop-down −

Example

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Example</title>
      <link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet">
      <script src = "/scripts/jquery.min.js"></script>
      <script src = "/bootstrap/js/bootstrap.min.js"></script>
   </head>
   <body style = "background: #FADBD8;">
      <h2>Website</h2>
      <ul class = "nav nav-tabs">
         <li class = "active"><a href = "#">Home</a></li>
         <li><a href = "#">About</a></li>
         <li class = "dropdown">
            <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#">
               Products
               <span class = "caret"></span>
            </a>
            <ul class = "dropdown-menu">
               <li><a href = "#">Online Compiler</a></li>
               <li><a href = "#">Image Editor</a></li>
               <li><a href = "#">Document Viewer</a></li>
            </ul>
         </li>
         <li><a href = "#">Services</a></li>
         <li><a href = "#">Contact</a></li>
      </ul>
   </body>
</html>
Updated on: 2020-06-12T18:00:19+05:30

1K+ Views

Learn More in Our Tutorials

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements