YouTip LogoYouTip

Bootstrap Button Dropdowns

This chapter will explain how to use Bootstrap classes to add dropdown menus to buttons. To add a dropdown menu to a button, you simply need to place the button and the dropdown menu within a **.btn-group** container. You can also use to indicate that the button acts as a dropdown. The following example demonstrates a basic button dropdown: ## Example [Try it Β»](#) The result is as follows: ![Image 1: Basic Button Dropdown](#) ## Split Button Dropdowns Split button dropdowns use roughly the same styles as button dropdowns, but they add the primary functionality to the dropdown. The left side of the split button is the primary action, and the right side is the toggle that displays the dropdown menu. ## Example [Try it Β»](#) The result is as follows: ![Image 2: Split Button Dropdown](#) ## Button Dropdown Sizes You can use dropdown menus with buttons of various sizes: **.btn-lg**, **.btn-sm**, or **.btn-xs**. ## Example [Try it Β»](#) The result is as follows: ![Image 3: Button Dropdown Sizes](#) ## Dropup Variation Menus can also be dropped upwards by simply adding the **.dropup** class to the parent **.btn-group** container. ## Example [Try it Β»](#) The result is as follows: ![Image 4: Dropup Variation](#)
← Bootstrap Input GroupsBootstrap Button Groups β†’