How to align one group of menu buttons to the left and one group to the right-CodePudding

I am using bootstrap 5 and would like to align one group of menu buttons to the left and another to the right on the same line. My code places the second group under the first group to the left.

I have:

button1  button2
button3  button4

I would like:

button1  button2                                                   button3  button 4

The code is:

<div class="collapse navbar-collapse" id="epNavbar">
  <ul class="navbar-nav w-100 me-auto mb-2 mb-lg-0">
    <li class="nav-item dropdown">
      <ul class="nav navbar-nav navbar-left">
        <li><a type="button" class="btn btn-colour1 nav-link dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Administration<span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a type="button" class="btn btn-colour1" href="BdyWghtMonAdmin.html">Body Weight Monitoring Frequency Administration</a></li>
            <li><a type="button" class="btn btn-colour1" href="SupplementAdmin.html">Post-Training Supplement Aministration</a></li>
          </ul>
        </li>
        <li><a type="button" class="btn btn-colour1" href="AccountUpdate.html">Account Update</a></li>
        <li><a type="button" class="btn btn-colour1" href="ExerciseAdmin.html">Exercise Library</a></li>

      </ul>

      <ul class="nav navbar-nav navbar-right">
        <li><a type="button" class="btn btn-success" href="LoginRoleSelect.html">Select Role</a></li>
        <li><a type="button" class="btn btn-danger" href="Login.html">Log out</a></li>
      </ul>
    </li>
  </ul>
</div>
<!-- /.navbar-collapse -->

CodePudding user response：

Short answer: If you add the class me-auto to your first ul tag, that should push the second set of buttons to the right (or 'end') of the container.

This question has a great top answer with a code example: Bootstrap NavBar with left, center or right aligned items