Bootstrap Dropdown

Dropdown menu is one of the most efficient way to categorize elements while saving space. Dropdown menu allows user to click on a button or a link which results in display of a predefined list of items. Bootstrap dropdown menus are extremely simple to create. to create dropdown menus in bootstrap, follow these steps.

  • Create an outer div with class “dropdown”
  • Inside the div, create a button or link. Add “dropdown-toggle” class to it. Also add to it,”data-toggle” attribute with value “dropdown”.
  • Create an un-ordered list and add a class of “dropdown-menu” to it. This is the list that will be opened when user clicks the button or link created in the second step.

Take a look at the following example to see basic bootstrap dropdown menu in action.

<!DOCTYPE html>
<html>
    <head>
           
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </head>

    <body> 
        <h1>Dropdown Menu</h1>
            <div class="dropdown">
              <button class="btn btn-info dropdown-toggle" type="button" data-toggle="dropdown">About Us
              <span class="caret"></span></button>
              <ul class="dropdown-menu">
                <li><a href="#">Our Team</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Services</a></li>
              </ul>
            </div>

    </body>

</html>

Download the code Try the code

If you run the above page in browser, you should see a button with blue background. This is because class “btn-info” is added to the button element. You can also see a small inverted triangle after the button text. This is added via “caret” class in span. Now if you click the button, you will see that the elements in the un-ordered list will appear. This is how, default bootstrap dropdown menu works.

Bootstrap Dropdown Menu with Headers

You can also add headers to the elements in the un-ordered list displayed as a result of clicking the drop down menu button. To do so, simply add “dropdown-header” class to the “li” element inside the list. Take a look at the following example.

<!DOCTYPE html>
<html>
    <head>
           
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </head>

    <body> 
        <h1>Dropdown Menu</h1>
            <div class="dropdown">
              <button class="btn btn-info dropdown-toggle" type="button" data-toggle="dropdown">About Us
              <span class="caret"></span></button>
              <ul class="dropdown-menu">
                <li class="dropdown-header">Our Team</li>
                <li><a href="#">James</a></li>
                <li><a href="#">Mike</a></li>
                <li class="divider"></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Services</a></li>
              </ul>
            </div>

    </body>

</html>

Download the code Try the code

If you open the above page and click on the button, a dropdown list shall appear. The first item i.e. “About Us” will be of shorter font size and will be of lighter color. This is because “dropdown-header” class has been added to it. Similarly, a “divider” class has also been added to the “li” item which creates a horizontal line.

<<< Bootstrap PanelBootstrap Collapsible >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .