bootstrap 3 button group in panel-header not centering

Question

I have a button group in a panel-header. I want them floated to the right, but when I do this the buttons are now down at the bottom of the header and I need them to be centered. How do I do this?

here's the HTML:

<div class="panel panel-default">
    <div class="panel-heading">
        Member of the following Units
        <div class="btn-group btn-group-sm">
            <button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span></button>
            <button type="button" class="btn btn-danger" ><span class="glyphicon glyphicon-remove-circle"></span></button>
        </div>
    </div>
    <div class="panel-body">
        test
    </div>
    <div class="panel-footer">
        test
    </div>      
</div>

and a fiddle example: http://jsfiddle.net/snowburnt/4ejuK/

Strangely enough, in my linux dev environment on chromium, the buttons themselves are properly centered but the icons within them are lower than they should be, I have a feeling this will answer both these issues.

Answer 1

1. You should add the class pull-right to your .btn-group div, instead of specifying float:right.

2. When you float an element, it loses block layout. It will no longer "push down" the bottom of its container since it doesn't have a height. You can fix this by setting overflow:hidden on your .panel-heading to allow it to resize properly. You will have to add top padding to the .panel-heading and negative top padding to the .btn-group to accomodate the height of the .btn-group.

I forked your fiddle: http://jsfiddle.net/Dq5ge/

Answer 2

You must clear your floats. There are many methods for this like the clearfix hack or using overflow: hidden. Which is what i did in your fiddle. http://jsfiddle.net/4ejuK/2/

.panel-heading {
    overflow: hidden;
}

parent elements will collapse if their floated children are not cleared causing a lot of unexpected layout issues.