Bootstrap - Button Dropdowns

In this tutorial we will learn about button dropdowns in Bootstrap.

Button dropdowns require the dropdown plugin.

Simple button dropdowns

We can turn a button into a dropdown toggle by adding the .dropdown-menu inside the .btn-group class.

<!-- single button dropdown -->
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Button dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Menu 3</a></li>
  </ul>
</div>

Output

Split button dropdown

We can create split button dropdown using the .btn-group and .dropdown-menu class.

<!-- split button -->
<div class="btn-group">
  <button type="button" class="btn btn-default">Menu</button>
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Item 3</a></li>
  </ul>
</div>

Output

Button group sizing

We can change the size of the button using the following classes .btn-lg for large button, .btn-sm for small button and .btn-xs for extra small button.

<!-- large button -->
<div class="btn-group">
  <button type="button" class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Item 3</a></li>
  </ul>
</div>

<!-- small button -->
<div class="btn-group">
  <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Item 3</a></li>
  </ul>
</div>

<!-- extra small button -->
<div class="btn-group">
  <button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Item 3</a></li>
  </ul>
</div>

Output