Dropdowns in Bootstrap

Goud.Kv
Posted by in Bootstrap category on for Beginner level | Points: 250 | Views : 2083 red flag

Bootstrap is developed by Twitter Inc, and comes with predefined CSS and JavaScript. By using Bootstrap, we can design a very responsive website easily. It is very handy once you understand.
Recommendation
Read Buttons in Bootstrap part-3 before this article.

Introduction

Please read Bootstrap Introduction if you are new to Bootstrap.
we have already seen dropdowns in previous chapter Bootstrap Menus, but here we are going to see them in detail.

Objective

The main objective of this article is to learn different types of Dropdowns in Bootstrap

Using Bootstrap code

We have some predefined classes in Bootstrap for dropdown menus. Lets go through the below example code with different types of dropdowns,
<div class="btn-group">
    <button data-toggle="dropdown" class="btn btn-primary dropdown-toggle">Menu <span class="caret"></span></button>
    <ul class="dropdown-menu">
        <li><a href="#">Option1</a></li>
        <li><a href="#">Option2</a></li>
        <li class="divider"></li>
        <li><a href="#">Settings</a></li>
    </ul>
</div>
<div class="btn-group">
    <button data-toggle="dropdown" class="btn btn-success dropdown-toggle">Menu <span class="caret"></span></button>
    <ul class="dropdown-menu">
        <li><a href="#">Option1</a></li>
        <li><a href="#">Option2</a></li>
        <li class="divider"></li>
        <li><a href="#">Settings</a></li>
    </ul>
</div>
<div class="btn-group">
    <button data-toggle="dropdown" class="btn btn-warning dropdown-toggle">Menu <span class="caret"></span></button>
    <ul class="dropdown-menu">
        <li><a href="#">Option1</a></li>
        <li><a href="#">Option2</a></li>
        <li class="divider"></li>
        <li><a href="#">Settings</a></li>
    </ul>
</div>
<div class="btn-group">
    <button data-toggle="dropdown" class="btn btn-danger dropdown-toggle">Menu <span class="caret"></span></button>
    <ul class="dropdown-menu">
        <li><a href="#">Option1</a></li>
        <li><a href="#">Option2</a></li>
        <li class="divider"></li>
        <li><a href="#">Settings</a></li>
    </ul>
</div>
<div class="btn-group">
    <button data-toggle="dropdown" class="btn btn-info dropdown-toggle">Menu <span class="caret"></span></button>
    <ul class="dropdown-menu">
        <li><a href="#">Option1</a></li>
        <li><a href="#">Option2</a></li>
        <li class="divider"></li>
        <li><a href="#">Settings</a></li>
    </ul>
</div>
In the above code, we have five types of Dropdown buttons which will look like below in your browser

We can also have default dropdown by using btn-default from bootstrap.css.

Dropdowns separated with Buttons:
If we want to give separate actions for dropdown and button, we have to code like below,
<div class="btn-group">
    <button class="btn btn-success">Menu</button>
    <button data-toggle="dropdown" class="btn btn-success dropdown-toggle"><span class="caret"></span>&nbsp;</button>
    <ul class="dropdown-menu">
        <li><a href="#">Option1</a></li>
        <li><a href="#">Option2</a></li>
        <li class="divider"></li>
        <li><a href="#">Settings</a></li>
    </ul>
</div>
<div class="btn-group btn-group-sm">
    <button class="btn btn-info">Menu</button>
    <button data-toggle="dropdown" class="btn btn-info dropdown-toggle"><span class="caret"></span>&nbsp;</button>
    <ul class="dropdown-menu">
        <li><a href="#">Option1</a></li>
        <li><a href="#">Option2</a></li>
        <li class="divider"></li>
        <li><a href="#">Settings</a></li>
    </ul>
</div>
<div class="btn-group btn-group-lg">
    <button class="btn btn-danger">Menu</button>
    <button data-toggle="dropdown" class="btn btn-danger dropdown-toggle"><span class="caret"></span>&nbsp;</button>
    <ul class="dropdown-menu">
        <li><a href="#">Option1</a></li>
        <li><a href="#">Option2</a></li>
        <li class="divider"></li>
        <li><a href="#">Settings</a></li>
    </ul>
</div>
In the above code, we have used btn-group classes to group dropdown with button and also giving separate actions.
Run the above code in your browser and you will see the output something like below

These are the sizes of dropdowns.

Dropdowns with JavaScript:
We can also give action to the drop menu using javascript. Observe the below script that we are using to perform drop action
<script type="text/javascript">
$(document).ready(function () {
    $(".menuDrop").dropdown();
});
</script>
And your dropdown page is,
<div class="dropdown">
    <a href="#" class="btn btn-primary menuDrop">Menu<b class="caret"></b></a>
    <ul class="dropdown-menu">
        <li><a href="#">Option1</a></li>
        <li><a href="#">Option2</a></li>
        <li class="divider"></li>
        <li><a href="#">Settings</a></li>
    </ul>
</div>
Now run this combination in your browser to get following output as result,

After clicking the menu, it will shows you a dropdown.

Dropdowns with more menu elements:
We can also group dropdowns with some other menu elements or buttons. Take a look at the below code which gets you the above scenario
<div class="btn-group">
    <button class="btn btn-warning">Home</button>
    <button class="btn btn-warning">What's New</button>
    <div class="btn-group">
        <button data-toggle="dropdown" class="btn btn-warning dropdown-toggle">Tutorials <span class="caret"></span></button>
        <ul class="dropdown-menu">
            <li><a href="#">ASP.Net</a></li>
            <li><a href="#">ASP.Net MVC</a></li>
            <li><a href="#">Bootstrap</a></li>
            <li><a href="#">JQuery</a></li>
            <li><a href="#">LESS</a></li>
            <li class="divider"></li>
            <li><a href="#">FAQ's</a></li>
        </ul>
    </div>
</div>
If you observe the above code, we are using btn-group class to group elements with dropdown. Run the above code in your browser to see the following result


Conclusion

In this article, we have seen different types of Dropdowns in Bootstrap. Hope you understand. If you have any doubts in this topic, please feel free to ask below.

Thanks for reading.

Regards,
Krishna.

Recommendation
Read Tooltips in Bootstrap after this article.
Page copy protected against web site content infringement by Copyscape

About the Author

Goud.Kv
Full Name: Krishna Vamshi Goud
Member Level: Gold
Member Status: Member,MVP
Member Since: 2/12/2014 2:34:09 AM
Country: India
Thanks & Regards, Krishna


Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)