Bootstrap 3 Panel Header with Buttons Wrong Position

Bootstrap 3 Panel Header with Buttons Set to Not Respect Parent Padding

Check out the fiddle

There is a padding on the panel-heading that you need to remove.

.option-button {
    height:100%;
}

.media-object {
    height: 50;
}
.panel-heading {
    padding: 0;
    }

<div class="panel panel-default">
  <div class="panel-heading clearfix">
    <h4 class="panel-title pull-left">Panel Title</h4>
    <div class="btn-group pull-right media-object">
      <a href="#" class="btn btn-default option-button">Button A</a>
      <a href="#" class="btn btn-default option-button">Button B</a>
      <a href="#" class="btn btn-default option-button">Button C</a>
    </div>
  </div>
  <div class="panel-body">
    Panel content.
  </div>
</div>

Bootstrap 3 Dropdown menu in panel header positioned wrong

You need to place the dropdown button inside a btn-group tag: see Docs

Working example Snippet.

 .panel-collapsable .panel-heading h4:after {   font-family: 'Glyphicons Halflings';   content: "\e114";   float: right;   color: white;   margin-right: 5px;   cursor: pointer; } .panel-collapsable .collapsed h4:after {   content: "\e080"; } .panel-heading .btn-group {   float: right; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /><div class="container">  <div class="row">    <div class="col-xs-12 col-sm-9 col-md-10 main">      <div class="panel panel-primary panel-collapsable panel-chart">        <div class="panel-heading">          <div class="btn-group">            <button class="btn btn-primary toggle-dropdown" data-toggle="dropdown" aria-expanded="false" aria-haspopup="true"> <span class="glyphicon glyphicon-cog"></span>
            </button>            <ul class="dropdown-menu dropdown-menu-right">              <li><a href="#">Action</a>
              </li>              <li><a href="#">Another action</a>
              </li>            </ul>          </div>          <h4 data-toggle="collapse" data-target="#sg1" aria-expanded="true"> Panel Box here <span class="label label-danger">Danger</span> </h4>
          <div class="clearfix"></div>        </div>        <div id="sg1" class="panel-body collapse in" aria-expanded="true">Text text text text text text text text text text text. Text text text text text text text text text text text. Text text text text text text text text text text text.          <br>Text text text text text text text text text text text. Text text text text text text text text text text text.</div>      </div>    </div>  </div></div>

bootstrap 3 button group in panel-header not centering

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/

Incorrect position of added button in Bootstrap default navbar

you should use inline class like this :

  <form class="navbar-form form-inline">
        <input type="text" class="search-query">
        <div class="btn-group">
            <button class="btn">1</button>
            <button class="btn">2</button>
        </div>
    </form>

more example :

http://getbootstrap.com/components/#navbar

Bootstrap panel header and body shorter than panel

From the Comments:

Hmm. I [can't reproduce](https://jsfiddle.net/pbdevch/6t9afwdu/) the error in a JSFiddle. Look if your CSS is overwritten by some theme or by your own styles.

Response:

@chade that was it thanks - it was a css style that was overwriting my panel and not my panel-heading as I was expecting!

I'm answering this so other users with the same problem can easily determine the answer that was provided.

Bootstrap buttons collapse inside the panel header

Add .clearfix class to .panel-heading

http://jsfiddle.net/52VtD/7245/

clickable panel header overlaps header buttons

I recommend you to learn about "event bubbling", so you added event listener on parent element and it automatically sets it for all child element (except elements which has own event handler and stopped propagation of parent events (links for example)).

So, you can just in event handler method use method "stopPropagation" in event object which is argument

Write in comments, if you need something, I will try to help you.

---

Related Topics