Navbar won't move towards the right side [duplicate] - html

Question

This question already has answers here:
Bootstrap align navbar items to the right
(24 answers)
Closed 4 years ago.
My navbar wont go towards the right side. I set the div as you can see. However, div still is staying on the left side of the navbar.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">BudLyfe</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="nav navbar-nav navbar-right">
<% if (!user_signed_in?) %>
<li><%= link_to "Login", new_user_session_path %></li>
<li><%= link_to "Sign Up", new_user_registration_path %></li>
<% else %>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"
role="button" aria-haspopup="true" aria-expanded="false">
<%= current_user.email %> <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><%= link_to "Edit Profile", edit_user_registration_path %></li>
<li><%= link_to "Log out", destroy_user_session_path, method: :delete %></li>
</ul>
</li>
<% end %>
</ul>
</div><!--/.nav-collapse -->
</nav>

Answer 1

It looks like bootstrap 4 uses utility classes for navbar spacing instead of the bootstrap 3 version of navbar-right. In the future, be sure you are looking at the correct documentation for the specific version of bootstrap that you are using.
Using ml-auto in place of navbar-right pushes that list to the right side of the navbar. This ml-auto class stands for margin-left: auto; which is the individual css rule you would use to achieve this effect without bootstrap.
Example codepen here: https://codepen.io/anon/pen/QzBKPe