Bootstrap 3 pagination centered
HTML
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<div class="container">
<!-- pagination holder -->
<div class="text-center ng-scope">
<ul class="pagination ng-isolate-scope ng-valid ng-dirty ng-valid-parse" ng-show="vm.loadingCompleted" total-items="vm.totalTrackers" items-per-page="vm.perPage" ng-model="vm.currentPage" ng-change="vm.pageChanged()" rotate="false" max-size="vm.paginationSize"
boundary-links="true" first-text="<<" last-text=">>" direction-links="true" previous-text="<" next-text=">" style="">
<!-- ngIf: ::boundaryLinks -->
<li ng-if="::boundaryLinks" ng-class="{disabled: noPrevious()||ngDisabled}" class="pagination-first ng-scope" style=""><a href="" ng-click="selectPage(1, $event)" class="ng-binding"><<</a>
</li>
<!-- end ngIf: ::boundaryLinks -->
<!-- ngIf: ::directionLinks -->
<li ng-if="::directionLinks" ng-class="{disabled: noPrevious()||ngDisabled}" class="pagination-prev ng-scope" style=""><a href="" ng-click="selectPage(page - 1, $event)" class="ng-binding"><</a>
</li <!-- ngRepeat: page in pages track by $index -->>
<!-- end ngIf: ::directionLinks -->
<li ng-repeat="page in pages track by $index" ng-class="{active: page.active,disabled: ngDisabled&&!page.active}" class="pagination-page ng-scope" style=""><a href="" ng-click="selectPage(page.number, $event)" class="ng-binding">1</a>
</li>
<!-- end ngRepeat: page in pages track by $index -->
<li ng-repeat="page in pages track by $index" ng-class="{active: page.active,disabled: ngDisabled&&!page.active}" class="pagination-page ng-scope active" style=""><a href="" ng-click="selectPage(page.number, $event)" class="ng-binding">2</a>
</li>
<!-- end ngRepeat: page in pages track by $index -->
<!-- ngIf: ::directionLinks -->
<li...
SCSS
$black : #000;
$white : #fff;
$mountain-mist : #999;
$mountain-mist-2 : #959595;
$ironside-gray : #666;
$fruit-salad : #62a05f;
$battleship-grey : #828282;
$nobel : #b4b4b4;
$black-haze : #f6f6f6;
$celeste : #ccc;
$french-blue : #0067b5;
$bahama-blue : #055b9c;
$mine-shaft : #333;
$red-pigment : #ed1b30;
$fire-engine-red : #d6172a;
$old-brick : #941421;
$bon-jour : #e1e1e1;
$silver-chalice : #afafaf;
$dim-gray : #696969;
$pink-swan : #b7b7b7;
$yellow-orange : #fcb034;
$sushi : #84be45;
$meteor : #cd7211;
.pagination > li > a {
border-radius:.22em;
margin-right:10px;
}
li.pagination-page {
a {
border-color:$mountain-mist-2 ;
background-color:$white ;
color: #bfbfbf;
}
&.active {
a {
background-color:$yellow-orange;
border-color:$yellow-orange;
&:hover {
background-color:$yellow-orange;
border-color:$yellow-orange;
}
}
}
}
.pagination>li:last-child>a, .pagination>li:last-child>span {
margin-right:0em;
}