Bootstrap - Button Dropdowns

This chapter will discuss about how to add dropdown menu to buttons using Bootstrap classes. To add a dropdown to a button, simply wrap the button and dropdown menu in a .btn-group. You can also use <span class = "caret"></span> to act as an indicator that the button is a dropdown.

The following example demonstrates 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>

Split Button Dropdowns

Split button dropdowns use the same general style as the dropdown button but add a primary action along with the dropdown. Split buttons have the primary action on the left and a toggle on the right that displays the dropdown.

<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>

Button Dropdown Size

You can use the dropdowns with any button size − .btn-large, .btn-sm, or.btn-xs.

<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>

Dropup Variation

Menus can also be built to drop up rather than down. To achieve this, simply add .dropup to the parent .btn-group container.

<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>