<div class="container my-4">

​

    <p class="font-weight-bold">To center the content of the Navbar use Bootstrap Flexbox utilities. See the examples of proper implementation.</p>

​

    <p><strong>Detailed documentation and more examples you can find in our <a href="https://mdbootstrap.com/docs/jquery/navigation/navbar/"

          target="_blank">Bootstrap Navbar Docs</a> and <a href="https://mdbootstrap.com/docs/jquery/utilities/flexbox/"

          target="_blank">Bootstrap Flexbox Docs</a>.</p>

​

    <hr class="my-4">

​

​

    <!--Navbar-->

    <nav class="navbar navbar-expand-lg navbar-dark primary-color">

​

      <div class="container">

​

        <!-- Collapse button -->

        <button class="navbar-toggler float-right" 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>

​

        <!-- Collapsible content -->

        <div class="collapse navbar-collapse justify-content-center" id="navbarSupportedContent">

​

          <!-- Links -->

          <ul class="navbar-nav">

​

            <li class="nav-item">

              <button class="btn btn-outline-white btn-sm" type="button">Main button</button>

            </li>

​

            <li class="nav-item">

              <a class="nav-link" href="#">Features</a>

            </li>

            <li class="nav-item">

              <a class="nav-link" href="#">Pricing</a>

            </li>

​

            <!-- Dropdown -->

            <li class="nav-item dropdown">

              <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"

                aria-expanded="false">Dropdown</a>

              <div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">

                <a class="dropdown-item" href="#">Action</a>

                <a class="dropdown-item" href="#">Another action</a>

                <a class="dropdown-item" href="#">Something else here</a>

              </div>

            </li>

​

          </ul>

          <!-- Links -->

​

        </div>

        <!-- CTA -->

​

      </div>

​

    </nav>

    <!--/.Navbar-->

​

​

  </div>