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