Button dropdowns work at any size: .btn-large
, .btn-small
, or .btn-mini
.
<!-- Large -->
<div class="btn-group">
<button class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown">Large <i class="fa fa-caret-down"></i></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#" tabindex="-1">Action</a></li>
<li><a href="#" tabindex="-1">Action Two</a></li>
</ul>
</div>
<!-- Default -->
<div class="btn-group">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">Default <i class="fa fa-caret-down"></i></button>
<ul class="dropdown-menu" role="menu">
<li><a href="" tabindex="-1">Action</a></li>
<li><a href="" tabindex="-1">Action Two</a></li>
</ul>
</div>
<!-- Small -->
<div class="btn-group">
<button class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown">Small <i class="fa fa-caret-down"></i></button>
<ul class="dropdown-menu" role="menu">
<li><a href="" tabindex="-1">Action</a></li>
<li><a href="" tabindex="-1">Action Two</a></li>
</ul>
</div>
<!-- Mini -->
<div class="btn-group">
<button class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">Mini <i class="fa fa-caret-down"></i></button>
<ul class="dropdown-menu" role="menu">
<li><a href="" tabindex="-1">Action</a></li>
<li><a href="" tabindex="-1">Action Two</a></li>
</ul>
</div>