Twitter bootstrap, button on panel title

Asked

Viewed 613 times

1

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.

inserir a descrição da imagem aqui

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>
css twitter-bootstrap

2 answers

4


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/

  • Thanks, that settles that too.

  • Plus, I’d have to add a little css, because the panel is not made to add buttons in the header and yes in the body, take a look at the fiddle...

0

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>

Browser other questions tagged css twitter-bootstrap

You are not signed in. Login or sign up in order to post.