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