Positioning drop down in panel heading boostrap - html

Question

I'm trying to add drop down to panel header (bootstrap). I've aligned drop down to right but it's not positioning properly.
Code
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
<i class="fa fa-bar-chart-o fa-fw"></i>
Analytics
</h3>
<div class="btn-group" style="float: right;">
<button class="btn">Action</button>
<button class="btn dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Item I</li>
<li>Item II</li>
<li>Item III</li>
<li class="divider"></li>
<li>Other</li>
</ul>
</div>
</div>
<div class="panel-body">
<div id="analytics-chart"></div>
</div>
</div>
</div>
</div>

Answer 1

What I would do in this situation is move the btn-group inside of the <h3> tag before applying the float:right; style (either using style="float:right;" or class="pull-right"). Then, simply adjust the top margin to something that makes it fit a little better into the panel-title, such as -8px:
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-bar-chart-o fa-fw"></i>
<div class="btn-group pull-right" style="margin-top:-8px;">
<button class="btn">Action</button>
<button class="btn dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li>Item I</li>
<li>Item II</li>
<li>Item III</li>
<li class="divider"></li>
<li>Other</li>
</ul>
</div>
Analytics
</h3>
</div>
<div class="panel-body">
<div id="analytics-chart"></div>
</div>
</div>
</div>
</div>
Also, remember to add dropdown-menu-right to your dropdown when using pull-right, otherwise it will extend beyond the edge of the screen.
Buttons never behave well when added to a panel-heading class, but you're free to tweak the classes to fit your needs.
Hope this helps!
Bootply Example