How to center .btn-group from twitter-bootstrap?
Adding text-center
to a parent works for me (Bootstrap 3):
<div class="text-center">
<div class="btn-group">
<a href=1 class="btn btn-small">1</a>
<a href=1 class="btn btn-small">2</a>
<a href=1 class="btn btn-small">3</a>
</div>
</div>
Edited: This has changed as of Bootstrap 3. See solution for Bootstrap 3 below.
Is adding a wrapping div out of the question?
Look at this example: http://jsfiddle.net/EVmwe/4/
Important part of the code:
/* a wrapper for the paginatior */
.btn-group-wrap {
text-align: center;
}
div.btn-group {
margin: 0 auto;
text-align: center;
width: inherit;
display: inline-block;
}
a {
float: left;
}
Wrapping the button group within a division, and setting the div to text-align center. The button group must also be overwritten to have display inline-block and inherited width.
Overwriting the anchors display to inline-block, and float: none, would also probably work, as @Andres Ilich said.
Update for Bootstrap 3
As of Bootstrap 3, you have alignment classes (as seen in the documentation). You now simply have to add the text-center
class to a parent. Like so:
<div class="text-center">
<ul class="pagination">
<li class="disabled"><a href="#">«</a></li>
<li class="active"><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>
See working example here: http://jsfiddle.net/EVmwe/409/