Options Admin - Responsive Web Application Kit

Bootstrap - Button Dropdown

We have styled all Bootstrap elements just as you want!

Toggle Code!

Single Button Dropdown

Turn a button into a dropdown toggle with some basic markup changes.

<!-- Single button --><div class="btn-group">    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">        Default <span class="caret"></span>    </button>    <ul class="dropdown-menu">        <li><a href="#">Action</a></li>        <li><a href="#">Another action</a></li>        <li><a href="#">Something else here</a></li>        <li role="separator" class="divider"></li>        <li><a href="#">Separated link</a></li>    </ul></div><!-- Single button | Change btn-default class to btn-primary --><div class="btn-group">    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">        Primary <span class="caret"></span>    </button>    <ul class="dropdown-menu">        <li><a href="#">Action</a></li>        <li><a href="#">Another action</a></li>        <li><a href="#">Something else here</a></li>        <li role="separator" class="divider"></li>        <li><a href="#">Separated link</a></li>    </ul></div>

Split Button Dropdowns

Similarly, create split button dropdowns with the same markup changes, only with a separate button.

<!-- Split button --><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" aria-haspopup="true" aria-expanded="false">        <span class="caret"></span>        <span class="sr-only">Toggle Dropdown</span>    </button>    <ul class="dropdown-menu">        <li><a href="#">Action</a></li>        <li><a href="#">Another action</a></li>        <li><a href="#">Something else here</a></li>        <li role="separator" class="divider"></li>        <li><a href="#">Separated link</a></li>    </ul></div><!-- Split button --><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" aria-haspopup="true" aria-expanded="false">        <span class="caret"></span>        <span class="sr-only">Toggle Dropdown</span>    </button>    <ul class="dropdown-menu">        <li><a href="#">Action</a></li>        <li><a href="#">Another action</a></li>        <li><a href="#">Something else here</a></li>        <li role="separator" class="divider"></li>        <li><a href="#">Separated link</a></li>    </ul></div>

Sizing

Button dropdowns work with buttons of all sizes.

<!-- Large button group --><div class="btn-group">    <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">        Large button <span class="caret"></span>    </button>    <ul class="dropdown-menu">        <li><a href="#">Action</a></li>        <li><a href="#">Another action</a></li>        <li><a href="#">Something else here</a></li>        <li role="separator" class="divider"></li>        <li><a href="#">Separated link</a></li>    </ul></div><!-- Small button group --><div class="btn-group">    <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">        Small button <span class="caret"></span>    </button>    <ul class="dropdown-menu">        <li><a href="#">Action</a></li>        <li><a href="#">Another action</a></li>        <li><a href="#">Something else here</a></li>        <li role="separator" class="divider"></li>        <li><a href="#">Separated link</a></li>    </ul></div><!-- Extra small button group --><div class="btn-group">    <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">        Extra small button <span class="caret"></span>    </button>    <ul class="dropdown-menu">        <li><a href="#">Action</a></li>        <li><a href="#">Another action</a></li>        <li><a href="#">Something else here</a></li>        <li role="separator" class="divider"></li>        <li><a href="#">Separated link</a></li>    </ul></div>

Dropup

Trigger dropdown menus above elements by adding .dropupto the parent.

<div class="btn-group dropup">    <button type="button" class="btn btn-default">Dropup</button>    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">        <span class="caret"></span>        <span class="sr-only">Toggle Dropdown</span>    </button>    <ul class="dropdown-menu">        <li><a href="#">Action</a></li>        <li><a href="#">Another action</a></li>        <li><a href="#">Something else here</a></li>        <li role="separator" class="divider"></li>        <li><a href="#">Separated link</a></li>    </ul></div><div class="btn-group dropup">    <button type="button" class="btn btn-danger">Dropup</button>    <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">        <span class="caret"></span>        <span class="sr-only">Toggle Dropdown</span>    </button>    <ul class="dropdown-menu">        <li><a href="#">Action</a></li>        <li><a href="#">Another action</a></li>        <li><a href="#">Something else here</a></li>        <li role="separator" class="divider"></li>        <li><a href="#">Separated link</a></li>    </ul></div>

John Doe

Bootstrap - Button Dropdown

Single Button Dropdown

Split Button Dropdowns

Sizing

Dropup

Useful Sidebar