Trouble pulling button in btn-group to right

css, html, twitter-bootstrap, twitter-bootstrap-3

Solution

I would put the close ("X") button in its own `.button-group` and pull the group to the right:

        <!-- previous button location -->
    </div><!-- close the existing group -->
    <div class="button-group pull-right">
        <!-- new button location -->
        <button type="button" class="btn btn-default as-btn-text as-refresh-btn">X</button>
    </div>
</div><!-- end .btn-toolbar -->

Here's an update to your fiddle.

The advantage to this approach is that you get the correct button rounding based on the `.button-group` rules and you don't need to alter or override existing Bootstrap framework CSS.

Problem

I have the following code which displays some buttons: Fiddle ``` <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups"> <div class="btn-group" role="group" aria-label="Toolbar Group"> <button type="button" class="btn btn-default as-btn-text as-add-btn">Add</button> <button type="button" class="btn btn-default as-btn-text as-delete-btn">Delete</button> <button type="button" class="btn btn-default dropdown-toggle as-btn-text as-conf-btn" data-toggle="dropdown" aria-expanded="false">Configuration <span class="caret"></span> </button> <ul class="dropdown-menu as-toolbar-dropdown" role="menu"> <li><a href="#">A</a> </li> <li><a href="#">B</a> </li> </ul> <button type="button" class="btn btn-default as-btn-text as-refresh-btn">X</button> </div> </div> ``` I want to pull the "X" to the far right of the group. I have tried `.pull-right`, `float:right` but neither seem to work. Any ideas appreciated!

Original source