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>