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> </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> </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> </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.
Krishna.