Bootstrap | Button Dropdowns

Bootstrap Button Dropdowns


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.

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 -

Split Button Dropdowns


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 -

Button Dropdown Size

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 -

Dropup Variation


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.