Как с bootstrap горизонтально выровнять элементы по разные стороны?

 <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="/list/">text</a>
          </li>
          <li class="nav-item active">
              <a class="nav-link" href="#">text</a>
          </li>
          {% if request.user.is_authenticated and not request.user.related_name %}
          <li class="nav-item active">
            <a class="nav-link" href="#">text</a>
          </li>
          {% endif %}
        </ul>
        <ul class="navbar-nav  my-2 my-lg-0">
          <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">
                text
              </a>
          </li>
            <li class="nav-item active">        
             <a href="#" id="sign-in"  class="nav-link" id="sign-in"><i class="fas fa-sign-in-alt"></i>text</a>
            </li>
        </ul>