Why I can not move Logout button to right side

user_15458481 0
Viewed 886

I am trying to move logout button to Right side

<ul class="navbar-nav">
        @if (User.Identity.IsAuthenticated)
        {
            <li class="nav-item d-none d-sm-inline-block">
                <form class="form-inline" asp-area="Identity" asp-page="/Account/Logout" asp-route-returnUrl="@Url.Action("Index", "Home", new { area = "" })">
                    <button type="submit" class="nav-link btn btn-link text-dark">Odjava</button>
                </form>
            </li>
        }
        else
        {
            <li class="nav-item d-none d-sm-inline-block">
                <a asp-area="Identity" asp-page="/Account/Login" class="nav-link">Prijava</a>
            </li>
            <li class="nav-item d-none d-sm-inline-block">
                <a asp-area="Identity" asp-page="/Account/Register" class="nav-link">Registracija</a>
            </li>
        }
    </ul>

I try something like adding text-right

<li class="nav-item d-none d-sm-inline-block text-right">
                <form class="form-inline" asp-area="Identity" asp-page="/Account/Logout" asp-route-returnUrl="@Url.Action("Index", "Home", new { area = "" })">
                    <button type="submit" class="nav-link btn btn-link text-dark">Odjava</button>
                </form>
            </li>

Also I try add

style="text-align:right;




<li class="nav-item d-none d-sm-inline-block text-right" style="text-align:right;">
                <form class="form-inline" asp-area="Identity" asp-page="/Account/Logout" asp-route-returnUrl="@Url.Action("Index", "Home", new { area = "" })">
                    <button type="submit" class="nav-link btn btn-link text-dark">Odjava</button>
                </form>
            </li>

enter image description here

Also something like this I also try

<button type="submit" class="nav-link btn btn-link text-dark text-right">Odjava</button>

Also using float: right doesn't work

 <button type="submit" class="nav-link btn btn-link text-dark float-right">Odjava</button>
asp.net-core-mvc asp.net-identity css html javascript
4 Answers

This is a bootstrap navbar. You need to add ml-auto on what you want to align on the right. ml-auto will align to the left.

This is an example of a username and logout on the right from the _loginPartial.

    <ul class="navbar-nav ml-auto">
@if (SignInManager.IsSignedIn(User))
{
    <li class="nav-item">
        <a id="manage" class="nav-link " asp-area="Test" asp-page="/Home/Index" title="Manage">@UserManager.GetUserName(User)</a>
    </li>
    <li class="nav-item">
        <form id="logoutForm" class="form-inline" asp-area="Test" asp-page="/Account/Logout" asp-route-returnUrl="@Url.Action("Index", "Home")">
            <button id="logout" type="submit" class="nav-link btn btn-link text-dark">Logout</button>
        </form>
    </li>
}
</ul>

enter image description here Here is the documentation if you want to review.

If you override the ul with a float attribute you can get it to work as noted in @mj1313 response. It will result in shifting the ul to the right on the collapsed state of the navbar, so if you want to have this aligned to the right on collapse then you can use it.

ml-auto collapsed

enter image description here

float:right collapsed

float right collapsed state

user_57798180

Please try this.

<ul class="navbar-nav" style="display: flex; justify-content: flex-end;">
  <li class="nav-item"></li>
</ul>
user_146519520

Add style="float: right" to the form tag.

<form style="float: right" class="form-inline" asp-area="Identity" asp-page="/Account/Logout" asp-route-returnUrl="@Url.Action("Index", "Home", new { area = "" })">
    <button type="submit" class="nav-link btn btn-link text-dark">Odjava</button>
</form>
user_119652970
user_122138960
Related