A basic button group:
<%= buttongroup buttons => [ ['Button 1'], ['Button 2'], ['Button 3'], ] %>
<div class="btn-group"> <button class="btn btn-default" type="button">Button 1</button> <button class="btn btn-default" type="button">Button 2</button> <button class="btn btn-default" type="button">Button 3</button> </div>
Nested button group. Note that the small
shortcut is only necessary once. The same classes are automatically applied to the nested .btn-group
:
<%= buttongroup small, buttons => [ ['Button 1'], ['Dropdown 1', caret, items => [ ['Item 1', ['item1'] ], ['Item 2', ['item2'] ], [], ['Item 3', ['item3'] ], ] ], ['Button 2'], ['Button 3'], ], %>
<div class="btn-group btn-group-sm"> <button class="btn btn-default" type="button">Button 1</button> <div class="btn-group btn-group-sm"> <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Dropdown 1 <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a class="menuitem" href="item1" tabindex="-1">Item 1</a></li> <li><a class="menuitem" href="item2" tabindex="-1">Item 2</a></li> <li class="divider"></li> <li><a class="menuitem" href="item3" tabindex="-1">Item 3</a></li> </ul> </div> <button class="btn btn-default" type="button">Button 2</button> <button class="btn btn-default" type="button">Button 3</button> </div>
Nested button group, with the vertical
shortcut:
<%= buttongroup vertical, buttons => [ ['Button 1'], ['Dropdown 1', caret, items => [ ['Item 1', ['item1'] ], ['Item 2', ['item2'] ], [], ['Item 3', ['item3'] ], ] ], ['Button 2'], ['Button 3'], ], %>
<div class="btn-group-vertical"> <button class="btn btn-default" type="button">Button 1</button> <div class="btn-group"> <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Dropdown 1 <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a class="menuitem" href="item1" tabindex="-1">Item 1</a></li> <li><a class="menuitem" href="item2" tabindex="-1">Item 2</a></li> <li class="divider"></li> <li><a class="menuitem" href="item3" tabindex="-1">Item 3</a></li> </ul> </div> <button class="btn btn-default" type="button">Button 2</button> <button class="btn btn-default" type="button">Button 3</button> </div>
A justified button group. Note the automatic (and necessary) wrapping of buttons in .btn-groups
:
<%= buttongroup justified, buttons => [ ['Button 1'], ['Button 2'], ['Button 3'], ] %>
<div class="btn-group btn-group-justified"> <div class="btn-group"> <button class="btn btn-default" type="button">Button 1</button> </div> <div class="btn-group"> <button class="btn btn-default" type="button">Button 2</button> </div> <div class="btn-group"> <button class="btn btn-default" type="button">Button 3</button> </div> </div>
Mix links and dropup
menus in justified
button groups:
<%= buttongroup justified, buttons => [ ['Link 1', ['http://www.example.com/'] ], ['Link 2', ['http://www.example.com/'] ], ['Dropup 1', caret, dropup, items => [ ['Item 1', ['item1'] ], ['Item 2', ['item2'] ], [], ['Item 3', ['item3'] ], ] ], ] %>
<div class="btn-group btn-group-justified"> <a class="btn btn-default" href="http://www.example.com/">Link 1</a> <a class="btn btn-default" href="http://www.example.com/">Link 2</a> <div class="btn-group dropup"> <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Dropup 1 <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a class="menuitem" href="item1" tabindex="-1">Item 1</a></li> <li><a class="menuitem" href="item2" tabindex="-1">Item 2</a></li> <li class="divider"></li> <li><a class="menuitem" href="item3" tabindex="-1">Item 3</a></li> </ul> </div> </div>
Split button dropdowns uses the same syntax as any other multi-button dropdown. Set the caret
button title to undef
:
<%= buttongroup buttons => [ ['Link 1', ['http://www.example.com/'] ], [undef, caret, items => [ ['Item 1', ['item1'] ], ['Item 2', ['item2'] ], [], ['Item 3', ['item3'] ], ] ], ] %>
<div class="btn-group"> <a class="btn btn-default" href="http://www.example.com/">Link 1</a> <div class="btn-group"> <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown"><span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a class="menuitem" href="item1" tabindex="-1">Item 1</a></li> <li><a class="menuitem" href="item2" tabindex="-1">Item 2</a></li> <li class="divider"></li> <li><a class="menuitem" href="item3" tabindex="-1">Item 3</a></li> </ul> </div> </div>
Using the simpler single-button button group dropdown syntax:
<%= buttongroup ['Default', caret, items => [ ['Item 1', ['item1'] ], ['Item 2', ['item2'] ], [], ['Item 3', ['item3'] ], ] ] %> <%= buttongroup ['Big danger', caret, large, danger, items => [ ['Item 1', ['item1'] ], ['Item 2', ['item2'] ], [], ['Item 3', ['item3'] ], ] ] %>
<div class="btn-group"> <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Default <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a class="menuitem" href="item1" tabindex="-1">Item 1</a></li> <li><a class="menuitem" href="item2" tabindex="-1">Item 2</a></li> <li class="divider"></li> <li><a class="menuitem" href="item3" tabindex="-1">Item 3</a></li> </ul> </div> <div class="btn-group"> <button class="btn btn-danger btn-lg dropdown-toggle" type="button" data-toggle="dropdown">Big danger <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a class="menuitem" href="item1" tabindex="-1">Item 1</a></li> <li><a class="menuitem" href="item2" tabindex="-1">Item 2</a></li> <li class="divider"></li> <li><a class="menuitem" href="item3" tabindex="-1">Item 3</a></li> </ul> </div>