Bootstrap Button Dropdowns
In this section we will demonstrate that how a dropdown menu can be added to a button by using the bootstrap classes. We can add dropdown to a button by including a button and dropdown in .btn- group class. A button can be made dropdown by using < span class = “caret” ></ span >.
Consider the following example which demonstrates a dropdown button:
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 = “btn- group” >
< button type = “button” class = “btn btn- default dropdown- toggle” data- toggle = “dropdown” > Default Dropdown Button
< span class = “caret” ></ span >
< /button >
< ul class = “dropdown- menu” role = “menu” >
< li > C++ </ li >
< li > Matlab </ li >
< li > Java </ li >
< /ul >
< div class = “btn- group” >
< button type = “button” class = “btn btn- primary dropdown- toggle” data- toggle = “dropdown” > Primary Dropdown Button
<span class = “caret”></span>
</button>
<ul class = “dropdown-menu” role = “menu”>
<li>C++</li>
<li>Matlab</li>
<li>Java</li>
</ul>
</div>
</div>
</body>
</html>
The above code will generate the following result:
OUTPUT:
Split Button Dropdowns:
The split button dropdowns are similar to a dropdown button; the only difference is that the split dropdown buttons have a primary action on the left and the dropdown on the right side.
Consider the following example which shows a split button dropdown:
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 = “btn-group”>
<button type = “button” class = “btn btn-default”>Default Split Dropdown Button</button>
<button type = “button” class = “btn btn-default dropdown-toggle” data-toggle = “dropdown”>
<span class = “caret”></span>
<span class = “sr-only”></span>
</button>
<ul class = “dropdown-menu” role = “menu”>
<li>C++</li>
<li>Matlab</li>
<li>Java</li>
</ul>
</div>
<div class = “btn-group”>
<button type = “button” class = “btn btn-primary”>Primary Split Dropdown Button</button>
<button type = “button” class = “btn btn-primary dropdown-toggle” data-toggle = “dropdown”>
<span class = “caret”></span>
<span class = “sr-only”></span>
</button>
<ul class = “dropdown-menu” role = “menu”>
<li>C++</li>
<li>Matlab</li>
<li>Java</li>
</ul>
</div>
</body>
</html>
The above code will generate the following result:
OUTPUT:
Button Dropdown Size:
The button dropdowns can be of different sizes in bootstrap. We can change the size of button dropdowns by using .btn- large, .btn- sm, and .btn- xs classes.
Consider the following example in which we have used button dropdowns of different sizes:
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 = “btn- group” >
< button type = “button” class = “btn btn- default dropdown- toggle btn- lg” data- toggle = “dropdown” > Default Dropdown
< span class = “caret” ></ span >
</ button >
< ul class = “dropdown- menu” role = “menu” >
< li > C++ </ li >
< li > Matlab </ li >
< li > Java </ li >
</ ul >
</ div >
< div class = “btn- group” >
< button type = “button” class = “btn btn- primary dropdown- toggle btn- sm” data- toggle = “dropdown” > Primary Dropdown
< span class = “caret” ></ span >
</ button >
< ul class = “dropdown-menu” role = “menu” >
< li > C++ </ li >
< li > Matlab </ li >
< li > Java </ li >
</ ul >
</ div >
< div class = “btn- group” >
< button type = “button” class = “btn btn- warning dropdown- toggle btn- xs” data- toggle = “dropdown” > Warning Dropdown
< span class = “caret” ></ span >
</ button >
< ul class = “dropdown- menu” role = “menu” >
< li > C++ </ li >
< li > Matlab </ li >
< li > Java </ li >
</ ul >
</ div >
</ body >
</ html >
The above code will generate the following result:
OUTPUT:
Dropup Variation:
In bootstrap we can create a drop up menu instead of drop down by simply using the .dropup class within the .btn- group class.
Consider the following example in which we have used the dropup 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 = “row” style = “margin- left: 40px; margin- top: 150px” >
< div class = “btn- group dropup” >
< button type = “button” class = “btn btn- default dropdown- toggle” data- toggle = “dropdown” > Default Dropup
< span class = “caret” ></ span >
</ button >
< ul class = “dropdown- menu” role = “menu” >
< li > C++ </ li >
< li > Matlab </ li >
< li > Java </ li >
< /ul >
</ div >
< div class = “btn- group dropup” >
< button type = “button” class = “btn btn- primary dropdown- toggle” data- toggle = “dropdown” > Primary Dropup
< span class = “caret” ></ span >
</ button >
< ul class = “dropdown- menu” role = “menu” >
< li > C++ </ li >
< li > Matlab </ li >
< li > Java </ li >
< /ul >
</ div >
< /div >
</ body >
</ html >
The above code will generate the following result:
OUTPUT: