Bootstrap 4 | Align to right

Question

I want to align a list to right on header, this is the code

<div class="collapse navbar-collapse" id="app-header-nav">
  <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
    <li class="nav-item">
      <a class="nav-link navbarMenuItem" href="#solution">Solution
        <span class="sr-only">(current)</span>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link navbarMenuItem" href="#company">Company</a>
    </li>
    <li class="nav-item">
      <a class="nav-link navbarMenuItem" href="#openings">Openings</a>
    </li>
    <li style="display:none" id="getStartedHeader" class="nav-item">
        <a class="nav-link navbarMenuItem getStartedButtonHeader" data-toggle="modal" data-target="#getStartedModal">Get Started</a>
    </li>
    <li class="nav-item">
      <a class="app-login nav-link" href="undefined">Login</a>
    </li>
  </ul>
</div>

I tried with float, ml-auto and justify-content-end, but nothing, there's a new way to align everything on div to right like text-right on bootstrap 4?

this is what i need.

Answer 1

Now that BS 4 has flexbox, alignment is much easier. Here are examples for left, right and center in the Bootstrap 4 Navbar.

This answer was copied from: Bootstrap NavBar with left, center or right aligned items