Align elements in Bootstrap panel header

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="&lsaquo;" next-text="&rsaquo;" first-text="&laquo;" last-text="&raquo;"></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">&laquo;</span>
                          </a>
                        </li>
                        <li><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li>
                          <a href="#" aria-label="Next">
                        <span aria-hidden="true">&raquo;</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;
}