Align items in Bootstrap panel title

Question

To have 3 elements in the title bar, 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 without file:

 .header-center { display: flex; justify-content: center; align-items: center; } 

But that means:

I need the add button to be aligned with other elements.

Answer 1

You can use boot 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 to clarify 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; } 

Answer 2

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