Bootstrap panel-footer with button pull-right

Question

I have the following HTML element with bootstrap:

 <div class="panel-footer">
                            <button type="button" id="btnSave" class="btn btn-default pull-right">Save</button>
                        </div>

If you see there is a gray area (panel-footer):

The button uses pull-right class also that is float:right, but I would like the gray area that is actually the panel-footer div to fit within the button height.

This is the styles for panel-footer:

And this for the pull-right:

Any clue?

UPDATE:

I added after the button:

<div class="clearfix"></div>

And seems that fixed the problem. Is that ok?

Answer 1

you can try this.

<div class="panel-footer text-right">
   <button type="button" id="btnSave" class="btn btn-default pull-right">Save</button>
</div>

You just need to add text-right class to your panel-footer.

It works for me.