Bootstrap 3: pagination-centered got removed

In bootstrap 2 there was a class called pagination-centered available which could be assigned to the unordered list. In bootstrap 3 this is changed, while that change isn’t listed on the migration page. The fix requires some extra markup.

For this example we have a regular pagination component:

<ul class="pagination">
      <li class="active"><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
</ul>

The pagination is aligned to the left by default. To center this, we need to wrap it in a div:

<div class="pagination-centered">
    <ul class="pagination">
      <li class="active"><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
    </ul>
</div>

Now we add the pagination-centered CSS class:

.pagination-centered {
    text-align: center;
}

That centers the pagination.

A demo is available on JSFiddle.

3 Replies to “Bootstrap 3: pagination-centered got removed”

  1. Hi.
    You can change name of class “pagination-centered” to “text-center” (is defined in bootstrap style) and then you do not need to create your own class in CSS file.

Leave a Reply

Your email address will not be published. Required fields are marked *