Teach with us

How to use Bootstrap Dropdown Plugins

Using Dropdown plugin you can add dropdown menus to any components like navbars, tabs, pills and buttons.

Let us see an example of dropdown plugins in Bootstrap −

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>
      <nav class = "navbar navbar-default" role = "navigation">
         <div class = "navbar-header">
            <a class = "navbar-brand" href = "#">TutorialsPoint</a>
         </div>
         <div id = "myexample">
            <ul class = "nav navbar-nav">
               <li class = "active"><a href = "#">Quiz</a></li>
               <li><a href = "#">QA</a></li>
               <li class = "dropdown">
                  <a href = "#" class = "dropdown-toggle">Tutorials <b class = "caret"></b></a>
                  <ul class = "dropdown-menu">
                     <li><a id = "action-1" href = "#">C</a></li>
                     <li><a href = "#">C++</a></li>
                     <li><a href = "#">Java</a></li>
                     <li class = "divider"></li>
                     <li><a href = "#">PHP</a></li>
                     <li class = "divider"></li>
                     <li><a href = "#">Android</a></li>
                  </ul>
               </li>
            </ul>
         </div>
      </nav>
      <script>
         $(function(){
            $(".dropdown-toggle").dropdown('toggle');
         });
      </script>
   </body>
</html>
Updated on 12-Jun-2020 22:14:29

0 Views

Tutorials Point

Previous Page Next Page  
Advertisements