Adding controls/buttons to a panel-heading and pull-right on the right side - Bootstrap 3

When we want to add a button or some controls on the right side at to top of panel in Bootstrap 3, we always see the consequence as below:

And the code in HTML might be like that:

........(other code)

<div class="panel">

    <div class="panel-heading">

        <h3 class="panel-title">Social Website</h3>

        <button type="button" class="btn btn-default btn-xs pull-right">

    <span class="glyphicon glyphicon-plus text-primary"></span>

    <span class="text-primary"><strong>Add</strong></span>

</button>

    </div>

    <div class="panel-body">

         Body

    </div>

.........(other code)

If you want to fix the position problem, you have two very very .... easy solutions as below:

Sample 1:

<div class="panel panel-info" style="word-break:break-all;">

    <div class="panel-heading">

        <h3 class="panel-title">Social Website

    <button type="button" class="btn btn-default btn-xs pull-right">

        <span class="glyphicon glyphicon-plus text-primary"></span>

        <span class="text-primary"><strong>Add</strong></span>

            </button>

        </h3>

    </div>

    <div class="panel-body">

        Body

    </div>

Sample 2 (better):

<div class="panel panel-info" style="word-break:break-all;">

    <div class="panel-heading">

        <h3 class="panel-title  pull-left">Social Website</h3>

    <button type="button" class="btn btn-default btn-xs pull-right">

        <span class="glyphicon glyphicon-plus text-primary"></span>

        <span class="text-primary"><strong>Add</strong></span>

            </button>

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

    </div>

    <div class="panel-body">

        Body

    </div>

P.S. If the controls or buttons get bigger, the text of panel-header might be not at the center position, so I suggest reader to scale buttons or controls to be smaller (E.g. .btn-xs and .btn-link). It will get more better in size