Bootstrap Button Dropdown

This chapter will explain how to use Bootstrap classes to add dropdown menus to buttons. To add a dropdown menu to a button, simply place the button and the dropdown menu within a .btn-group container. You can also use <span class="caret"></span> to indicate that the button serves as a dropdown menu.

The following example demonstrates a basic simple button dropdown:

Example

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

The result is as follows:

Split Button Dropdown

Split button dropdowns use the same styles as dropdown buttons, but they add the original functionality to the dropdown menu. The left side of the split button is the original function, and the right side is the toggle for the dropdown menu.

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>

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

Result is shown as follows:

Button Dropdown Sizes

You can use dropdowns with buttons of various sizes: .btn-lg, .btn-sm or .btn-xs.

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>

Result is shown as follows:

Dropup Buttons

Menus can also be stretched upwards, simply by adding .dropup to the parent .btn-group container.

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="#">Function</a>
    </li>
    <li>
        <a href="#">Another Function</a>
    </li>
    <li>
        <a href="#">Other</a>
    </li>
    <li class="divider"></li>
    <li>
        <a href="#">Separate 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="#">Function</a>
        </li>
        <li>
            <a href="#">Another Function</a>
        </li>
        <li>
            <a href="#">Other</a>
        </li>
        <li class="divider"></li>
        <li>
            <a href="#">Separate Link</a>
        </li>
    </ul>
</div>
</div>