Bootstrap alignment of button and pagination
Wrap a semantic descriptive class around your button and pagination, such as .navigation-bar and use this to target the margin on the .pagination:
.navigation-bar .pagination {
margin-top: 0;
}
http://bootply.com/91736
You should never override a framework class directly, as it would apply across your entire code base. The alternative is to simply extend the .pagination class:
<ul class="pagination no-margin pull-right">
Try adding ths:-
.pagination {
margin: 0px !important;
}
I would go for:
<div class="btn-toolbar" role="toolbar" style="margin: 0;">
<div class="btn-group">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button>
</div>
<div class="btn-group pull-right">
<ul class="pagination" style="margin: 0;">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
</div>
</div>
http://www.bootply.com/116457
if you replace the <ul><li....
with buttons , you not need to use style="margin: 0;
Example here: http://getbootstrap.com/components/#btn-groups-toolbar