The example

Let's talk about what to do. On a mobile device i want the menu to center the text, default bootstrap aligns the menu items to the left.

This is not what we want. But we know bootstrap, it uses flexbox because it is awesome! So let's start with the default navbar from bootstrap and play a bit with it. This is what we ended up with;

The html

<nav class="navbar navbar-expand-lg navbar-light bg-light" id="top">
    <div class="container">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav align-items-center mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#top">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#example">The example</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle text-center" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        And a dropdown
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item text-center" href="#">Action</a>
                        <a class="dropdown-item text-center" href="#">Another action</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item text-center" href="#">Something else here</a>
                    </div>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#html">The html</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#see-what">I see what you did there</a>
                </li>
            </ul>
            <div class="d-flex flex-row justify-content-center">
                <a href="#" class="btn">
                    <i class="fa fa-paper-plane"></i>
                </a>
                <a href="#" class="btn">
                    <i class="fa fa-floppy-o"></i>
                </a>
            </div>
        </div>
    </div>
</nav>

I see what you did there

And if you did not, let's explain! From the example i added a container, still default. Next on the navbar-nav i just added a class align-items-center. And done! Nav items centered on a mobile screen. 

<ul class="navbar-nav mr-auto">
<ul class="navbar-nav align-items-center mr-auto">

Ok, on the example there was a form on the left. We replaced that with a couple of buttons. But the inner workings is the same, only that the form is a bit more checking out. But we added a class d-flex flex-row justify-content-center on the container. This will still float the container to the right on a desktop, but flexes the container on a mobile screen. This can be added on the form on the basic example.

Also, on the dropdown elements we added a text-center class. On the nav-link and the dropdown-item items. This is so that text is also centered

And that's it! We are done, we have a nice centered navbar.

Once more, just the example

Just to be sure. Let's do that again. Now with a copy paste from the bootstrap page and the classes we mentioned! 

<nav class="navbar navbar-expand-lg navbar-light bg-light" id="top">
    <div class="container">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav align-items-center mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#top">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#example">The example</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle text-center" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        And a dropdown
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item text-center" href="#">Action</a>
                        <a class="dropdown-item text-center" href="#">Another action</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item text-center" href="#">Something else here</a>
                    </div>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#html">The html</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#see-what">I see what you did there</a>
                </li>
            </ul>
            <div class="d-flex flex-row justify-content-center">
                <a href="#" class="btn">
                    <i class="fa fa-paper-plane"></i>
                </a>
                <a href="#" class="btn">
                    <i class="fa fa-floppy-o"></i>
                </a>
            </div>
        </div>
    </div>
</nav>

Enjoy!