How to center a fixed top Navbar in bootstrap 4

Question

I am trying to center a fixed top navbar in Bootstrap 4 apla 6 but it is not centering it, but instead fills the top in full. How can I make it centered whi

Answer 1

Edit: I see that the original answer here is the right one for the asked question - which works for when you want your navbar background to be 'contained/centered' too. However, if you want your navbar background to take full width, my way is the way to go.

---

Adding .container to the <nav> element will create a new problem: the <nav> background will stop occupying full width. Which is usually not the desired behavior.

To get around this, simply nest all the contents of the element in a .container .As follows:

  <nav class="navbar navbar-toggleable-sm fixed-top navbar-inverse bg-inverse">
        <div class="container">
            <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
                data-target="#navbar1">
                <span class="navbar-toggler-icon"></span>
            </button>
            <a class="navbar-brand" href="#">Brand</a>
            <div class="collapse navbar-collapse" id="navbar1">
                <ul class="navbar-nav">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Link</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Link</a>
                    </li>
                </ul>
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Link</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

Answer 2

Make the navbar a container too...

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

<nav class="navbar container navbar-toggleable-sm fixed-top navbar-inverse bg-inverse">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar1">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Brand</a>
    <div class="collapse navbar-collapse" id="navbar1">
        <ul class="navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
        <ul class="navbar-nav ml-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
</nav>