brand between left and right navigation in bootstrap 4

Question

 <nav class="navbar-toggleable-sm" role="navigation">
      <div class="container justify-content-center">


          <div class="navbar-brand navbar-brand-centered">Brand</div>




          <ul class=" navbar-nav float-left">
            <li class = "nav-item"><a class=" nav-link" href="#">Link</a></li>
            <li class = "nav-item"><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 float-right">
            <li class = "nav-item"><a class=" nav-link" href="#">Link</a></li>
            <li class = "nav-item"><a class=" nav-link" href="#">Link</a></li>
            <li class = "nav-item"><a class=" nav-link" href="#">Link</a></li>              
          </ul>
        <!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>

I have started to learn bootsrap 4 here i want my navigation like the first three links to left and others to right of my brand of logo and that whole container be justified as center also.

You'll find the [answer here](http://stackoverflow.com/a/42181069/171456) and in the other dups. — Carol Skelly, May 04 '17 at 15:16

score -1 · Accepted Answer · answered May 04 '17 at 14:45

 <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
    <a class="navbar-brand mx-auto" href="#">BRAND</a>
    <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav ml-auto">
             <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
             <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
             <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
</nav>

brand between left and right navigation in bootstrap 4

1 Answers1