Hello folks! welcome back to a new edition of our tutorial on Bootstrap. In this tutorial post, we will be studying about how to add dropdown menu to buttons by making use of Bootstrap classes.
To add a dropdown to a button, simply wrap the button and dropdown menu around in a .btn-group. You can also use <span class = "caret"></span> to act as an indicator that the button is a dropdown.
To add a dropdown to a button, simply wrap the button and dropdown menu around in a .btn-group. You can also use <span class = "caret"></span> to act as an indicator that the button is a dropdown.
Example
Following example illustrates a basic single button Dropdowns -
<div class = "btn-group"> <button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown"> Default <span class = "caret"></span> </button> <ul class = "dropdown-menu" role = "menu"> <li><a href = "#">Action</a></li> <li><a href = "#">Another action</a></li> <li><a href = "#">Something else here</a></li> <li class = "divider"></li> <li><a href = "#">Separated link</a></li> </ul> </div> <div class = "btn-group"> <button type = "button" class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown"> Primary <span class = "caret"></span> </button> <ul class = "dropdown-menu" role = "menu"> <li><a href = "#">Action</a></li> <li><a href = "#">Another action</a></li> <li><a href = "#">Something else here</a></li> <li class = "divider"></li> <li><a href = "#">Separated link</a></li> </ul> </div>
Output
When the above example is executed, it will produce the following result -
Split Button Dropdowns
The split button dropdowns uses the same general style as the dropdown button but adds a primary action with the dropdowns. Split buttons have the primary action on the left and a toggle on the right that shows the dropdown.
Example
Following below is a simple example -
<div class = "btn-group"> <button type = "button" class = "btn btn-default">Default</button> <button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown"> <span class = "caret"></span> <span class = "sr-only">Toggle Dropdown</span> </button> <ul class = "dropdown-menu" role = "menu"> <li><a href = "#">Action</a></li> <li><a href = "#">Another action</a></li> <li><a href = "#">Something else here</a></li> <li class = "divider"></li> <li><a href = "#">Separated link</a></li> </ul> </div> <div class = "btn-group"> <button type = "button" class = "btn btn-primary">Primary</button> <button type = "button" class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown"> <span class = "caret"></span> <span class = "sr-only">Toggle Dropdown</span> </button> <ul class = "dropdown-menu" role = "menu"> <li><a href = "#">Action</a></li> <li><a href = "#">Another action</a></li> <li><a href = "#">Something else here</a></li> <li class = "divider"></li> <li><a href = "#">Separated link</a></li> </ul> </div>
Output
When the above example is executed, it will produce the following result -
Button Dropdown Size
You can use the dropdowns with any button size such as .btn-large, .btn-sm, .btn-xs.
Example
Following below is a simple example -
<div class = "btn-group"> <button type = "button" class = "btn btn-default dropdown-toggle btn-lg" data-toggle = "dropdown"> Default <span class = "caret"></span> </button> <ul class = "dropdown-menu" role = "menu"> <li><a href = "#">Action</a></li> <li><a href = "#">Another action</a></li> <li><a href = "#">Something else here</a></li> <li class = "divider"></li> <li><a href = "#">Separated link</a></li> </ul> </div> <div class = "btn-group"> <button type = "button" class = "btn btn-primary dropdown-toggle btn-sm" data-toggle = "dropdown"> Primary <span class = "caret"></span> </button> <ul class = "dropdown-menu" role = "menu"> <li><a href = "#">Action</a></li> <li><a href = "#">Another action</a></li> <li><a href = "#">Something else here</a></li> <li class = "divider"></li> <li><a href = "#">Separated link</a></li> </ul> </div> <div class = "btn-group"> <button type = "button" class = "btn btn-success dropdown-toggle btn-xs" data-toggle = "dropdown"> Success <span class = "caret"></span> </button> <ul class = "dropdown-menu" role = "menu"> <li><a href = "#">Action</a></li> <li><a href = "#">Another action</a></li> <li><a href = "#">Something else here</a></li> <li class = "divider"></li> <li><a href = "#">Separated link</a></li> </ul> </div>
Output
When the above example is executed, it will produce the following result -
Dropup Variation
Menus can also be built to drop up instead of dropdown. In order to attain this, simply add .dropup to the parent .btn-group.
Example
Following below is a simple example -
<div class = "row" style = "margin-left:50px; margin-top:200px"> <div class = "btn-group dropup"> <button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown"> Default <span class = "caret"></span> </button> <ul class = "dropdown-menu" role = "menu"> <li><a href = "#">Action</a></li> <li><a href = "#">Another action</a></li> <li><a href = "#">Something else here</a></li> <li class = "divider"></li> <li><a href = "#">Separated link</a></li> </ul> </div> <div class = "btn-group dropup"> <button type = "button" class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown"> Primary <span class = "caret"></span> </button> <ul class = "dropdown-menu" role = "menu"> <li><a href = "#">Action</a></li> <li><a href = "#">Another action</a></li> <li><a href = "#">Something else here</a></li> <li class = "divider"></li> <li><a href = "#">Separated link</a></li> </ul> </div> </div>
Output
When the above example is executed, it will produce the following result -
READ: Bootstrap | Dropdowns
Alright guys! This is where we are going to be rounding up for this tutorial. In our next tutorial guide, we are going to be studying about the Bootstrap Input Groups.
Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.
Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.
