Align elements in Bootstrap panel header - html

Question

In order to have 3 elements into a panel header I tried this :
<div class="panel panel-primary">
<!-- Default panel header contents -->
<div class="panel-heading">
<h4 class="panel-title">
<div class="pull-left">
<h4 class="panel-title"> <i class="glyphicon glyphicon-user"></i>
Users
</h4>
</div>
<div class="header-center">
<pagination class="panel-title" ng-show="totalItems > pageParameters.size" items-per-page="pageParameters.size" boundary-links="true" total-items="totalItems" ng-model="currentPage" ng-change="changePage()"
previous-text="‹" next-text="›" first-text="«" last-text="»"></pagination>
</div>
<div class="pull-right">
<span class="panel-title btn-group">
<button ng-disabled="underCreation" type="button" class="btn btn-default btn-sm" ng-click="addUser()">
<span class="glyphicon glyphicon-plus text-primary"></span>
<span class="text-primary"><strong>Add</strong></span>
</button>
</span>
</div>
</h4>
<div class="clearfix"></div>
</div>
</div>
And .less file corresponding :
.header-center {
display: flex;
justify-content: center;
align-items: center;
}
But this renders :
I need the add button to be aligned with other elements..

Answer 1

You can use bootstrap grids to solve this problem
you can use col-xs-3,col-xs-6,col-xs-3 to create 3 parallel columns
check the code for more clarification http://jsfiddle.net/5doxw0ea/
HTML:
<div class="container">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="container-fluid panel-container">
<div class="col-xs-3 text-left">
<h4 class="panel-title abc">
<i class="glyphicon glyphicon-user"></i>
Users
</h4>
</div>
<div class="col-xs-6 text-center ">
<ul class="pagination panel-pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</div>
<div class="col-xs-3 text-right">
<span class="panel-title btn-group">
<button ng-disabled="underCreation" type="button" class="btn btn-default btn-sm abc" ng-click="addUser()">
<span class="glyphicon glyphicon-plus text-primary"></span>
<span class="text-primary"><strong>Add</strong></span>
</button>
</span>
</div>
</div>
</div>
</div>
</div>
CSS:
.panel-pagination {
margin: 0 0 !important;
}
.panel-container {
padding-right: 0 !important;
padding-left: 0 !important;
height:35px;
}
.abc{
height:35px;
display:table-cell !important;
vertical-align:middle;
}

Answer 2

You could also just move the third div pull-right above the second div header-center if you don't need a full grid there.