Bootstrap 3 Dropdowns, Full details of Bootstrap 3 Dropdowns

Bootstrap Tutorial

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 :

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 :

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).

Bootstrap Tutorial