Bootstrap 4 Center Pagination in Column

Question

I'm using Bootstrap 4 and attempting to horizontally center a pagination UL inside a grid column. Now that the pagination is display:flex I can't get it to properly center.

I would like to use only existing Bootstrap classes w/o any additional CSS to get it centered.

I have tried using text-center, mx-auto, align-items-center but nothing seems to work.

<div class="container">
    <div class="row">
        <div class="col-lg-6 offset-lg-3 py-5 border">
            <ul class="pagination mx-auto">
                <li class="page-item disabled">
                    <a class="page-link" href="#" aria-label="Previous">
                        <span aria-hidden="true">«</span>
                        <span class="sr-only">Previous</span>
                    </a>
                </li>
                <li class="page-item active">
                    <a class="page-link" href="#">1</a>
                </li>
                <li class="page-item"><a class="page-link" href="#">2</a></li>
                <li class="page-item"><a class="page-link" href="#">3</a></li>
                <li class="page-item"><a class="page-link" href="#">4</a></li>
                <li class="page-item">
                    <a class="page-link" href="#" aria-label="Next">
                        <span aria-hidden="true">»</span>
                        <span class="sr-only">Next</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>

Here is the Code example

Solution 1

I changed the column to display:flex using d-flex and now mx-auto works to center the pagination UL...

This works without extra CSS

<div class="container">
    <div class="row">
        <div class="col-lg-6 offset-lg-3 py-5 border d-flex">
            <ul class="pagination mx-auto">
                <li class="page-item disabled">
                    <a class="page-link" href="#" aria-label="Previous">
                        <span aria-hidden="true">«</span>
                        <span class="sr-only">Previous</span>
                    </a>
                </li>
                <li class="page-item active">
                    <a class="page-link" href="#">1</a>
                </li>
                <li class="page-item"><a class="page-link" href="#">2</a></li>
                <li class="page-item"><a class="page-link" href="#">3</a></li>
                <li class="page-item"><a class="page-link" href="#">4</a></li>
                <li class="page-item">
                    <a class="page-link" href="#" aria-label="Next">
                        <span aria-hidden="true">»</span>
                        <span class="sr-only">Next</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>

http://www.codeply.com/go/JQKwUW2Tjg

Alternately, the justify-content-center class can be used in the 'pagination` UL.

Solution 2

Just add justify-content: center; in .pagination class

.pagination {
   justify-content: center;
}

Here is working code: https://jsfiddle.net/r9z25u06/

Solution 3

Use the class .justify-content-center on the .pagination ul.

e.g. <ul class="pagination justify-content-center">

Solution 4

solution for Bootstrap 4

You can use it Alignment use this class justify-content-center

Change the alignment of pagination components with flexbox utilities.

and learn more about it pagination

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<nav aria-label="Page navigation example">
  <ul class="pagination justify-content-center">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">Previous</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">Next</a>
    </li>
  </ul>
</nav>

View more solutions

Comments

[Mukesh Ram]

Welcome.. if answer was helping you then please accept the answer.. thanks :)

[kjdion84]

Or just use the class .justify-content-center on the .pagination ul.

[user1204214]

for those using compiled SASS bootstrap4 I literally just added the above code into my custom.scss to fix the problem and then recompiled

[Jonathan Wood]

Thanks! Not sure why classes such as text-center don't work here. Also, is there no justify-content-right or justify-content-left?

[stardust4891]

justify-content-start and justify-content-end.