Bootstrap 4 Center Pagination in Column

bootstrap-4, css, flexbox, twitter-bootstrap, twitter-bootstrap-4

Solution

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.

Problem

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

Original source