<?php
$dropdown = new Barebone\Bootstrap\Dropdown('Dropdown', 'primary');
$dropdown->addHeader('Header actions');
$dropdown->addItem('Action', '#');
$dropdown->addItem('Another action', '#');
$dropdown->addItem('Something else here', '#');
echo $dropdown;
<div class="btn-group"> <div class="btn-group"> <button class="btn btn-primary dropdown-toggle" type="button" id="ddbtn6aebcc5f1e7be" data-toggle="dropdown"> Dropdown<span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="ddbtn6aebcc5f1e7be"> <li role="presentation" class="dropdown-header">Header actions</li> <li role="menuitem" tabindex="-1"> <a href="#">Action</a> </li> <li role="menuitem" tabindex="-1"> <a href="#">Another action</a> </li> <li role="menuitem" tabindex="-1"> <a href="#">Something else here</a> </li> </ul> </div> </div> <div class="btn-group"> <div class="btn-group"> <button class="btn btn-danger dropdown-toggle" type="button" id="ddbtn6aebcc5f1e7d1" data-toggle="dropdown"> Dropdown<span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="ddbtn6aebcc5f1e7d1"> <li role="presentation" class="dropdown-header">Header actions</li> <li role="menuitem" tabindex="-1"> <a href="#">Action</a> </li> <li role="menuitem" tabindex="-1"> <a href="#">Another action</a> </li> <li role="menuitem" tabindex="-1"> <a href="#">Something else here</a> </li> </ul> </div> </div>
Button dropdowns work with buttons of all sizes.
<?php
$dropdown = new Barebone\Bootstrap\Dropdown('Dropdown', 'primary');
$dropdown->addHeader('Header actions');
$dropdown->addItem('Action', '#');
$dropdown->addItem('Another action', '#');
$dropdown->addItem('Something else here', '#');
echo $dropdown;
<div class="dropdown"> <button class="btn btn-primary dropdown-toggle btn-lg" type="button" id="ddbtn6aebcc5f1e830" data-toggle="dropdown"> Large button<span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="ddbtn6aebcc5f1e830"> <li role="presentation" class="dropdown-header">Header actions</li> <li role="menuitem" tabindex="-1"> <a href="#">Action</a> </li> <li role="menuitem" tabindex="-1"> <a href="#">Another action</a> </li> <li role="menuitem" tabindex="-1"> <a href="#">Something else here</a> </li> </ul> </div> <div class="dropdown"> <button class="btn btn-danger dropdown-toggle btn-sm" type="button" id="ddbtn6aebcc5f1e83d" data-toggle="dropdown"> Small button<span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="ddbtn6aebcc5f1e83d"> <li role="presentation" class="dropdown-header">Header actions</li> <li role="menuitem" tabindex="-1"> <a href="#">Action</a> </li> <li role="menuitem" tabindex="-1"> <a href="#">Another action</a> </li> <li role="menuitem" tabindex="-1"> <a href="#">Something else here</a> </li> </ul> </div> <div class="dropdown"> <button class="btn btn-warning dropdown-toggle btn-xs" type="button" id="ddbtn6aebcc5f1e847" data-toggle="dropdown"> Extra small<span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="ddbtn6aebcc5f1e847"> <li role="presentation" class="dropdown-header">Header actions</li> <li role="menuitem" tabindex="-1"> <a href="#">Action</a> </li> <li role="menuitem" tabindex="-1"> <a href="#">Another action</a> </li> <li role="menuitem" tabindex="-1"> <a href="#">Something else here</a> </li> </ul> </div>