Bootstrap Dropdowns
In this section we are going to explain the dropdown menus in bootstrap. The dropdown menus can be used to for displaying the data or even links in the form of list or in a list format. In bootstrap we can use the dropdown menus by simply using the .dropdown class in our code.
Consider the following example in which we have used the .dropdown class to include dropdown menu in our webpage:
CODE:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<link href=”/bootstrap/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”/scripts/jquery.min.js”></script>
<script src=”/bootstrap /js/bootstrap.min.js”></script>
</head>
<body>
<div class = “dropdown”>
<button type = “button” class = “btn dropdown-toggle” id = “dropdowns” data-toggle = “dropdown”>Menu
<span class = “caret”></span>
</button>
<ul class = “dropdown-menu” role = “menu” aria-labelledby = “dropdowns”>
<li role = “presentation”>
<a role = “menuitem” tabindex = “2” href = “C++.com”>C++</a>
</li>
<li role = “presentation”>
<a role = “menuitem” tabindex = “2” href = “matlab.com”> Matlab </a>
</li>
<li role = “presentation”>
<a role = “menuitem” tabindex = “2” href = “networking.com” >Networking
</a>
</li>
</ul>
</div>
</body>
</html>
The above code will generate the following result:
OUTPUT:
In the above example we created a dropdown menu which has a list of links for some of the programming languages.
Options:
Alignment:
The dropdown menu in bootstrap can be aligned to the right side of the page by using the .pull- right class with the .dropdown- menu class. Consider the following example in which we have aligned the dropdown menu by using the .pull-right class:
CODE:
<! DOCTYPE html >
< html >
< head >
< title > Bootstrap Example </ title >
< link href = “/ bootstrap/ css/ bootstrap. min. css” rel = “stylesheet” >
< script src = “/ scripts/ jquery. min. js” ></ script >
< script src = “/ bootstrap/ js/ bootstrap. min. js” ></ script >
</ head >
< body >
< div class = “dropdown” >
< button type = “button” class = “btn dropdown- toggle” id = “dropdowns” data- toggle = “dropdown” > Menu
< span class = “caret” >< /span >
</ button >
< ul class = “dropdown- menu pull- right” role = “menu” aria- labelledby = “dropdowns” >
< li role = “presentation” >
< a role = “menuitem” tabindex = “2” > C++ < /a >
</ li >
< li role = “presentation” >
< a role = “menuitem” tabindex = “2” > Matlab </ a >
</ li >
< li role = “presentation” >
< a role = “menuitem” tabindex = “2” > Networking
</ a >
</ li >
< /ul >
</ div >
</ body >
</ html >
The above code will generate the following result:
OUTPUT:
In the above example it can be seen that the menu is appearing at the right side of the page this is because we used the class .pull-right within the .dropdown class.
Headers:
In bootstrap a header can be added to a label section inside the menu. This can be done by using the class .dropdown- header.
Consider the following in which we have added a header inside the dropdown menu:
CODE:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<link href=”/bootstrap/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”/scripts/jquery.min.js”></script>
<script src=”/bootstrap/js/bootstrap.min.js”></script>
</head>
<body>
<div class = “dropdown”>
<button type = “button” class = “btn dropdown-toggle” id = “dropdowns” data-toggle = “dropdown”>Menu
<span class = “caret”></span>
</button>
<ul class = “dropdown-menu” role = “menu” aria-labelledby = “dropdowns”>
<li role = “presentation” class = “dropdown-header”>Programming Languages</li>
<li role = “presentation” >
<a role = “menuitem” tabindex = “2”>C++</a>
</li>
<li role = “presentation”>
<a role = “menuitem” tabindex = “2”>Matlab</a>
</li>
<li role = “presentation”>
<a role = “menuitem” tabindex = “2”>Networking</a>
</li>
</ul>
</div>
</body>
</html>
The above example will generate the following result:
OUTPUT:
