All for Joomla All for Webmasters

Bootstrap Dropdowns

Dropdown menus are toggleable, contextual menus, used for displaying links in a list format. It facilitates users to choose one value from a predefined list. This can be made interactive with the dropdown JavaScript plugin.

You have to wrap dropdown menu within the class .dropdown to create Bootstrap Dropdown.

Bootstrap Dropdown Example

  1.  <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta name=“viewport” content=“width=device-width, initial-scale=1”>
  5.   <link rel=“stylesheet” href=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”>
  6. </head>
  7. <body>
  8. <div class=“container”>
  9.   <h2>Dropdowns</h2>
  10.   <p>The .dropdown class is used to indicate a dropdown menu.</p>
  11.   <p>Use the .dropdown-menu class to actually build the dropdown menu.</p>
  12.   <p>To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and data-toggle=“dropdown”.</p>
  13.   <div class=“dropdown”>
  14.     <button class=“btn btn-primary dropdown-toggle” type=“button” data-toggle=“dropdown”>Dropdown Example
  15.     <span class=“caret”></span></button>
  16.     <ul class=“dropdown-menu”>
  17.       <li><a href=“#”>HTML</a></li>
  18.       <li><a href=“#”>CSS</a></li>
  19.       <li><a href=“#”>JavaScript</a></li>
  20.     </ul>
  21.   </div>
  22. </div>
  23. <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”></script>
  24. <script src=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js”></script>
  25. </body>
  26. </html>

 

Bootstrap Dropdown Divider

The class .divider is used to separate links inside the dropdown menu:

See this example:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta name=“viewport” content=“width=device-width, initial-scale=1”>
  5.   <link rel=“stylesheet” href=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”>
  6. </head>
  7. <body>
  8. <div class=“container”>
  9.   <h2>Dropdowns</h2>
  10.   <p>The .divider class is used to separate links inside the dropdown menu:</p>
  11.   <div class=“dropdown”>
  12.     <button class=“btn btn-default dropdown-toggle” type=“button” data-toggle=“dropdown”>Tutorials
  13.     <span class=“caret”></span></button>
  14.     <ul class=“dropdown-menu”>
  15.       <li><a href=“#”>HTML</a></li>
  16.       <li><a href=“#”>CSS</a></li>
  17.       <li><a href=“#”>JavaScript</a></li>
  18.       <li class=“divider”></li>
  19.       <li><a href=“#”>About Us</a></li>
  20.     </ul>
  21.   </div>
  22. </div>
  23.  <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”></script>
  24.  <script src=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js”></script>
  25. </body>
  26. </html>

 

Bootstrap Dropdown Header

The class .dropdown-header is used to add headers inside the dropdown menu.

See this example:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta name=“viewport” content=“width=device-width, initial-scale=1”>
  5.   <link rel=“stylesheet” href=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”>
  6. </head>
  7. <body>
  8. <div class=“container”>
  9.   <h2>Dropdowns</h2>
  10.   <p>The .dropdown-header class is used to add headers inside the dropdown menu:</p>
  11.   <div class=“dropdown”>
  12.     <button class=“btn btn-default dropdown-toggle” type=“button” data-toggle=“dropdown”>Tutorials
  13.     <span class=“caret”></span></button>
  14.     <ul class=“dropdown-menu”>
  15.       <li class=“dropdown-header”>Dropdown header 1</li>
  16.       <li><a href=“#”>HTML</a></li>
  17.       <li><a href=“#”>CSS</a></li>
  18.       <li><a href=“#”>JavaScript</a></li>
  19.       <li class=“divider”></li>
  20.       <li class=“dropdown-header”>Dropdown header 2</li>
  21.       <li><a href=“#”>About Us</a></li>
  22.     </ul>
  23.   </div>
  24. </div>
  25.  <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”></script>
  26.  <script src=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js”></script>
  27. </body>
  28. </html>

 

Bootstrap Dropdown: Disable an item

Use the class .disabled to disable an item in the dropdown menu.

See this example:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta name=“viewport” content=“width=device-width, initial-scale=1”>
  5.   <link rel=“stylesheet” href=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”>
  6. </head>
  7. <body>
  8. <div class=“container”>
  9.   <h2>Dropdowns</h2>
  10.   <p>Here, CSS is disable.</p>
  11.   <div class=“dropdown”>
  12.     <button class=“btn btn-default dropdown-toggle” type=“button” data-toggle=“dropdown”>Tutorials
  13.     <span class=“caret”></span></button>
  14.     <ul class=“dropdown-menu”>
  15.       <li><a href=“#”>HTML</a></li>
  16.       <li class=“disabled”><a href=“#”>CSS</a></li>
  17.       <li><a href=“#”>JavaScript</a></li>
  18.       <li class=“divider”></li>
  19.       <li><a href=“#”>About Us</a></li>
  20.     </ul>
  21.   </div>
  22. </div>
  23. <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”></script>
  24. <script src=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js”></script>
  25. </body>
  26. </html>
PinIt
submit to reddit

Leave a Reply

Top