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:


Bootstrap Example

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:

Split Button Dropdowns


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:

Button Dropdown Size


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:

Dropup Variation