Bootstrap Nav Bar Center Align

Question

<!-- Navbar start -->
    <nav class="navbar navbar-default" role="navigation">
      <div class="container-fluid">

        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#a-navbar-collapse" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>

          <a class="navbar-brand" href="#">
            Brand
          </a>
        </div>


       <div class="navbar-collapse collapse"  id="a-navbar-collapse">  
           <ul class="nav navbar-nav">
                     <li><a href="#">Link 1</a></li>
                     <li><a href="#">Link 2</a></li> 
                     <li><a href="#">Link 3</a></li>
                     <li><a href="#">Link 4</a></li> 
                     <li><a href="#">Link 5</a></li> 
           </ul>


              <ul class="nav navbar-nav navbar-right">
                 <li><a href="#">Link 6</a></li>
                 <li><a href="#">Link 7</a></li>
              </ul>
        </div> 
       </div>
    </nav>
    <!-- Navbar End -->

This is my HTML Code , as this is will be the Navigation Bar - I would like to keep my Brand at the Left Corner - it fine now The Links i.e Link 1 to Link 5 align centered of the Navigation Bar the Link 6 and Link 7 at the Right Side - its fine now

Help me to align the Link 1 to Link 5 to the middle of navigation Bar such that at the Collapse Time the center alignment should be removed and all the collapsed links should be left side

First Post ! sorry for bad english

Answer 1

Just use the below mentioned css and you can achieve it. Add class=navbar-center to the <ul> containing links which needs to be middle align

Working example

@media (min-width: 768px) {
  .navbar-nav.navbar-center {
    position: absolute;
    left: 50%;
    transform: translatex(-50%);
  }
}

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default" role="navigation">
      <div class="container-fluid">

        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#a-navbar-collapse" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>

          <a class="navbar-brand" href="#">
            Brand
          </a>
        </div>


       <div class="navbar-collapse collapse"  id="a-navbar-collapse">  
           <ul class="nav navbar-nav navbar-center">
                     <li><a href="#">Link 1</a></li>
                     <li><a href="#">Link 2</a></li> 
                     <li><a href="#">Link 3</a></li>
                     <li><a href="#">Link 4</a></li> 
                     <li><a href="#">Link 5</a></li> 
           </ul>


              <ul class="nav navbar-nav navbar-right">
                 <li><a href="#">Link 6</a></li>
                 <li><a href="#">Link 7</a></li>
              </ul>
        </div> 
       </div>
    </nav>