How can i center my links on the navbar with bootstrap ? Twitter Bootstrap Navbar Problem

Bootstrap | Bootstrap Navbar Problem :

i want to center this Twitter Bootstrap navbar in middle of the page but iam not able to center this twitter bootstrap navbar centr allign. if someone look this code and help me what is wrong with my code.

Unsolve : Looking for this Solution Twitter Bootstrap Navbar code Error

 

<div class="collapse navbar-collapse" id="navbarSupportedContent">
  <ul class="navbar-nav ml-auto  mr-auto nav">
    <li class="nav-item active">
      <a class=" nav-link" href="main.html">Accueil <span class="sr-only">(current)</span></a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Calendrier
      </a>
      <div class="dropdown-menu" aria-labelledby="navbarDropdown">
        <a class="dropdown-item" href="#">Consulter</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Ajouter</a>
      </div>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Contact</a>
    </li>
  </ul>