Adding bootstrap btn-group to panel-heading adds space below panel-heading - html

Question

I'm trying to get a button into a panel-heading section, but I can't get it to display on the same line. I've managed to get it centered with help of some of the questions on StackOverflow where others asked about a button on the right of the header, but adding the button in seems to make the header taller.
I've got an example showing the difference Bootply
Code
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="panel panel-default" ng-init="getApplications()">
<div class="panel-heading clearfix">
<b>Title has space below</b>
<div class="btn-group pull-right">
new
</div>
</div>
<div class="panel-body">
<!-- table -->
<table class="table table-striped table-condensed table-hover">
<thead>
<tr>
<th>Name</th>
<th>Last Release Date</th>
<th>Orders</th>
<th>Downloads</th>
<th>Activations</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="app in apps">
<td>{{app.columns.name}}</td>
<td>{{app.lastReleaseDt}} </td>
<td>{{app.totalOrders}}</td>
<td>TODO </td>
<td>{{app.totalActivations}}</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="panel panel-default" ng-init="getApplications()">
<div class="panel-heading clearfix">
<b>Title has no space</b>
</div>
<div class="panel-body">
<!-- table -->
<table class="table table-striped table-condensed table-hover">
<thead>
<tr>
<th>Name</th>
<th>Last Release Date</th>
<th>Orders</th>
<th>Downloads</th>
<th>Activations</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="app in apps">
<td>{{app.columns.name}}</td>
<td>{{app.lastReleaseDt}} </td>
<td>{{app.totalOrders}}</td>
<td>TODO </td>
<td>{{app.totalActivations}}</td>
</tr>
</tbody>
</table>
</div>
</div>
Does anybody have any ideas why adding a button or button group to the panel heading increases the height? Any tips on getting the height to what it was before the button?

Answer 1

because you are using a btn-sm (for small-devices) if you use btn-xs (for extra-small devices) that space will go away due to having a smaller padding
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="panel panel-default" ng-init="getApplications()">
<div class="panel-heading clearfix">
<b>Title has space below</b>
<div class="btn-group pull-right">
new
</div>
</div>
<div class="panel-body">
<!-- table -->
<table class="table table-striped table-condensed table-hover">
<thead>
<tr>
<th>Name</th>
<th>Last Release Date</th>
<th>Orders</th>
<th>Downloads</th>
<th>Activations</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="app in apps">
<td>{{app.columns.name}}</td>
<td>{{app.lastReleaseDt}} </td>
<td>{{app.totalOrders}}</td>
<td>TODO </td>
<td>{{app.totalActivations}}</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="panel panel-default" ng-init="getApplications()">
<div class="panel-heading clearfix">
<b>Title has no space</b>
</div>
<div class="panel-body">
<!-- table -->
<table class="table table-striped table-condensed table-hover">
<thead>
<tr>
<th>Name</th>
<th>Last Release Date</th>
<th>Orders</th>
<th>Downloads</th>
<th>Activations</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="app in apps">
<td>{{app.columns.name}}</td>
<td>{{app.lastReleaseDt}} </td>
<td>{{app.totalOrders}}</td>
<td>TODO </td>
<td>{{app.totalActivations}}</td>
</tr>
</tbody>
</table>
</div>
</div>