How to move element in nav

How i can move my “Contact” in to the right position? I want to have this element on the right in navigation.

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css">


<nav class="navbar navbar-expand navbar-dark bg-dark">
  <div class="collapse navbar-collapse" id="navbarsExample02">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">Left 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Left 2</a>
      </li>
    </ul>
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Right 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Right 2</a>
      </li>
    </ul>
  </div>
</nav>

Try this

1 Like

A simpler version of @michal9909 suggestion without multiple navbars:

<nav class="navbar navbar-expand navbar-dark bg-dark">
  <div class="collapse navbar-collapse" id="navbarsExample02">
    <ul class="navbar-nav w-100"> // Makes the ul stretch horizontally
      <li class="nav-item">
        <a class="nav-link" href="#">Left 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Left 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Left 3</a>
      </li>
      <li class="nav-item ml-auto">
        <a class="nav-link" href="#">Right 1</a>
      </li>
    </ul>
  </div>
</nav>

Or, if you want to mantain your current setup:

  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link" href="#">Main</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Projects</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">About Me</a>
    </li>
    <li class="nav-item ml-auto">
      <a class="nav-link" href="#">Contact Me</a>
    </li>
  </ul>
1 Like