Prev Page
Next Page  
Bootstrap Dropdowns
You can use the Bootstrap dropdown menus to nearly anything with this simple plugin, including the navbar, tabs, and pills.

Via data attributes or JavaScript, the dropdown plugin toggles hidden content (dropdown menus) by toggling the <code>.open</code> class on the parent list item.

Via data attributes : Add data-toggle = "dropdown" to a link or button to toggle a dropdown

Via JavaScript :  To call the dropdown toggle via JavaScrip.

On mobile devices, opening a dropdown adds a <code>. .dropdown-backdrop</code> as a tap area for closing dropdown menus when tapping outside the menu, a requirement for proper iOS support.
Within a navbar
<!DOCTYPE html>
<html>
<head>
   <title>Dropdown Menu</title>
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
   <script type="text/javascript" src="../js/jquery.min.js"></script>
   <script type="text/javascript" src="../js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container-fluid">
 
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
            <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="http://freetimelearning.com/" class="navbar-brand">Free Time Learning</a>
        </div>
     <div id="navbarCollapse" class="collapse navbar-collapse">
    <ul class="nav navbar-nav">
      <li> <a href="http://freetimelearning.com/" target="_blank">Home</a></li>
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">HTML5
        <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="http://freetimelearning.com/html5/html5-events.php" target="_blank">Events</a></li>
          <li><a href="http://freetimelearning.com/html5/html5-section-tags.php" target="_blank">Section Tag</a></li>
          <li><a href="http://freetimelearning.com/html5/html5-dialog-tag.php" target="_blank">Dialog Tag</a></li>
        </ul>
      </li>
      
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">CSS3
        <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="http://freetimelearning.com/css3/css3-backgrounds.php" target="_blank">Backgrounds</a></li>
          <li><a href="http://freetimelearning.com/css3/css3-borders.php" target="_blank">Borders</a></li>
          <li><a href="http://freetimelearning.com/css3/css3-animations.php" target="_blank">Animations</a></li>
        </ul>
      </li>
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">BOOTSTRAP
        <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="http://freetimelearning.com/bootstrap/bootstrap-grid-system.php" target="_blank">Grid System</a></li>
          <li><a href="http://freetimelearning.com/bootstrap/bootstrap-layouts.php" target="_blank">Layout</a></li>
          <li><a href="http://freetimelearning.com/bootstrap/bootstrap-typography.php" target="_blank">Typography</a></li>
        </ul>
      </li>
    </ul>
  </div>
</nav>
    
</div>
 
</body>
</html>
Output :
Dropdowns
Dropdown Pills
<!DOCTYPE html>
<html>
<head>
   <title>Dropdown Pills</title>
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
   <script type="text/javascript" src="../js/jquery.min.js"></script>
   <script type="text/javascript" src="../js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container-fluid">
 
<ul class="nav nav-pills">
<li class="active"><a href="http://freetimelearning.com/">Home</a></li>
<li class="dropdown">
    <a href="#" data-toggle="dropdown" class="dropdown-toggle">HTML5<b class="caret"></b></a>
     <ul class="dropdown-menu">
      <li><a href="http://freetimelearning.com/html5/html5-events.php" target="_blank">Events</a></li>
      <li><a href="http://freetimelearning.com/html5/html5-section-tags.php" target="_blank">Section Tag</a></li>
      <li><a href="http://freetimelearning.com/html5/html5-dialog-tag.php" target="_blank">Dialog Tag</a></li>
    </ul>
</li>
<li class="dropdown">
    <a href="#" data-toggle="dropdown" class="dropdown-toggle">CSS3<b class="caret"></b></a>
    <ul class="dropdown-menu">
      <li><a href="http://freetimelearning.com/css3/css3-backgrounds.php" target="_blank">Backgrounds</a></li>
      <li><a href="http://freetimelearning.com/css3/css3-borders.php" target="_blank">Borders</a></li>
      <li><a href="http://freetimelearning.com/css3/css3-animations.php" target="_blank">Animations</a></li>
    </ul>
</li>
<li class="dropdown">
    <a href="#" data-toggle="dropdown" class="dropdown-toggle">Bootstrap <b class="caret"></b></a>
    <ul class="dropdown-menu">
      <li><a href="http://freetimelearning.com/bootstrap/bootstrap-grid-system.php" target="_blank">Grid System</a></li>
      <li><a href="http://freetimelearning.com/bootstrap/bootstrap-layouts.php" target="_blank">Layout</a></li>
      <li><a href="http://freetimelearning.com/bootstrap/bootstrap-typography.php" target="_blank">Typography</a></li>
    </ul>
</li>
<li class="dropdown pull-right">
    <a href="#" data-toggle="dropdown" class="dropdown-toggle">My Account <b class="caret"></b></a>
    <ul class="dropdown-menu">
        <li><a href="#">Settinng</a></li>
        <li><a href="#">Signin</a></li>
        <li class="divider"></li>
        <li><a href="#">Sign Out</a></li>
    </ul>
</li>
</ul>
 
</div>
 
</body>
</html>
Output :
Dropdowns
Via Javascript
Call the dropdowns via JavaScript:
$('.dropdown-toggle').dropdown()
Methods
Toggles the dropdown menu of a given navbar or tabbed navigation.
$().dropdown('toggle')
Dropdown Divider
<!DOCTYPE html>
<html>
<head>
   <title>Dropdown Divider</title>
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container-fluid">
 
  <div class="dropdown">
        <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Web Designing
        <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a href="http://www.freetimelearning.com/html-tutorial.php" target="_blank">HTML</a></li>
          <li><a href="http://www.freetimelearning.com/css-basic-tutorial.php" target="_blank">CSS</a></li>
          <li><a href="http://www.freetimelearning.com/html5-tutorial.php" target="_blank">HTML5</a></li>
          <li><a href="http://www.freetimelearning.com/css3-tutorial.php" target="_blank">CSS3</a></li>
          <li class="divider"></li>
          <li><a href="http://www.freetimelearning.com/javascript-tutorial.php" target="_blank">JavaScript</a></li>
          <li><a href="http://www.freetimelearning.com/bootstrap-tutorial.php" target="_blank">Bootstrap</a></li>
        </ul>
  </div>
 
</div>
 
</body>
</html>
Output :
Dropdown Header
<!DOCTYPE html>
<html>
<head>
   <title>Dropdown Header</title>
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container-fluid">
 
  <div class="dropdown">
        <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Web Designing
        <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li class="dropdown-header">Basic Programming</li>
          <li><a href="http://www.freetimelearning.com/html-tutorial.php" target="_blank">HTML</a></li>
          <li><a href="http://www.freetimelearning.com/css-basic-tutorial.php" target="_blank">CSS</a></li>
          <li><a href="http://www.freetimelearning.com/html5-tutorial.php" target="_blank">HTML5</a></li>
          <li><a href="http://www.freetimelearning.com/css3-tutorial.php" target="_blank">CSS3</a></li>
          <li class="dropdown-header">Advanced Programming</li>
          <li><a href="http://www.freetimelearning.com/javascript-tutorial.php" target="_blank">JavaScript</a></li>
          <li><a href="http://www.freetimelearning.com/bootstrap-tutorial.php" target="_blank">Bootstrap</a></li>
        </ul>
  </div>
 
</div>
 
</body>
</html>
Output :
Dropdowns Disable and Active States
<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap Disable and Active States</title>
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container-fluid">
 
  <div class="dropdown">
        <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Web Application
        <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a href="http://www.freetimelearning.com/html-tutorial.php" target="_blank">HTML</a></li>
          <li><a href="http://www.freetimelearning.com/javascript-tutorial.php" target="_blank">JavaScript</a></li>
          <li class="active"><a href="http://www.freetimelearning.com/bootstrap-tutorial.php" target="_blank">Bootstrap</a></li>
          <li class="disabled"><a href="#" target="_blank">PHP</a></li>
          <li class="disabled"><a href="#" target="_blank">AngularJS</a></li>
        </ul>
  </div>
 
</div>
 
</body>
</html>
Output :
Bootstrap Dropup
Add <div> element with class="dropdown" to "dropup". 
<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap Dropup</title>
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container-fluid">
 
  <div style="padding:100px 0px 0px;">
<div class="dropup">
        <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Dropup Example
        <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a href="http://www.freetimelearning.com/html-tutorial.php" target="_blank">HTML</a></li>
          <li><a href="http://www.freetimelearning.com/javascript-tutorial.php" target="_blank">JavaScript</a></li>
          <li><a href="http://www.freetimelearning.com/bootstrap-tutorial.php" target="_blank">Bootstrap</a></li>
        </ul>
   </div>
 </div>
 
</div>
 
</body>
</html>
Output :
Dropdown Events
All dropdown events are fired at the .dropdown-menu's parent element.
Event Type Description
show.bs.dropdown This event fires immediately when the show instance method is called.
shown.bs.dropdown This event is fired when the dropdown has been made visible to the user (will wait for CSS transitions, to complete).
hide.bs.dropdown This event is fired immediately when the hide instance method has been called.
hidden.bs.dropdown This event is fired when the dropdown has finished being hidden from the user (will wait for CSS transitions, to complete).
  Prev Page
Next Page