Twitter bootstrap, button on panel title

Question

I’m trying to put a button inside the title of a panel twitter bootstrap 3, but this button is not aligned centered on the panel.

Code:

<div class="panel panel-default">
    <div class="panel-heading"> 
        Fórum
        <div class="pull-right"><button class="btn">Criar tópico</button>       </div>
        </div>
        <div class="panel-body">

        </div>


</div>

Answer 1

Try to use a smaller button, what occurs is that the margins of the button are bursting the div of header of panel.

<button class="btn btn-xs">Criar tópico</button>

It turns out that the normal button is the same size as a panel header, but using an extra-small type button is perfect in this situation.

It would even be strange header be greatly enlarged by the margins.

Jsfiddle: http://jsfiddle.net/aymone/4tfuL/

Answer 2

I did so and it worked:

<div class="panel-heading">
                      <div class="row"> <h3 class="col-xs-11 panel-title">Fórum</h3>
                            <div class="pull-right col-xs-1"><a href="#" class="btn btn-info btn-xs" style="border:0">Criar Tópico</a></div>
                      </div>
                  </div>