CODEWITHSUNDEEP
htmlcss
ProRiderZ115
ProRiderZ115

Reputation: 155

Cannot align to right margin with bootstrap

I read a lot of post about this issue but I still cannot align my button to the right margin.

I have a navbar with multiple buttons and I need to align to the right the SingIn/SignOut button.

This is my code:

<header th:fragment="header">
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <a class="navbar-brand" href="#">Spring Boot</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbarNav" aria-controls="navbarNav"
            aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item active"><a class="nav-link" href="#">Home
                        <span class="sr-only">(current)</span>
                </a></li>
                <li class="nav-item"><a class="nav-link" th:href="@{/listar}">Clientes</a>
                </li>
            </ul>
            <ul class="navbar-nav mr-auto">
                <li sec:authorize="!isAuthenticated()"><a
                    class="btn btn-outline-primary" th:href="@{/login}">Sign In</a></li>
                    
                <li sec:authorize="isAuthenticated()" class="dropdown show">
                    <a class="btn btn-outline-primary dropdown-toggle" href="#"
                        role="button" id="dropdownMenuLink" data-toggle="dropdown"
                        aria-haspopup="true" aria-expanded="false"><span sec:authentication="name"></span></a>

                    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                        <form id="logoutForm" th:action="@{/logout}" method="post">
                            <button class="dropdown-item" onclick="document.getElementById('logoutForm').submit();" type="submit">Sign Out</button>
                        </form>
                    </div>
                    
                </li>
            </ul>
        </div>
    </nav>

Upvotes: 0

Views: 61

Answers (2)

MaxiGui
MaxiGui

Reputation: 6358

Change your mr-auto for ml-auto in: <ul class="navbar-nav mr-auto"> because the way you set it push the block to the left by adding a margin-right: auto;

Upvotes: 1

Nathan Chu
Nathan Chu

Reputation: 657

<header th:fragment="header">
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <a class="navbar-brand" href="#">Spring Boot</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbarNav" aria-controls="navbarNav"
            aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav mr-auto"> <!-- add the mr-auto class here -->
                <li class="nav-item active"><a class="nav-link" href="#">Home
                        <span class="sr-only">(current)</span>
                </a></li>
                <li class="nav-item"><a class="nav-link" th:href="@{/listar}">Clientes</a>
                </li>
            </ul>
            <ul class="navbar-nav"> <!-- remove the mr-auto class here -->
                <li sec:authorize="!isAuthenticated()"><a
                    class="btn btn-outline-primary" th:href="@{/login}">Sign In</a></li>
                    
                <li sec:authorize="isAuthenticated()" class="dropdown show">
                    <a class="btn btn-outline-primary dropdown-toggle" href="#"
                        role="button" id="dropdownMenuLink" data-toggle="dropdown"
                        aria-haspopup="true" aria-expanded="false"><span sec:authentication="name"></span></a>

                    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                        <form id="logoutForm" th:action="@{/logout}" method="post">
                            <button class="dropdown-item" onclick="document.getElementById('logoutForm').submit();" type="submit">Sign Out</button>
                        </form>
                    </div>
                    
                </li>
            </ul>
        </div>
    </nav>

See https://getbootstrap.com/docs/4.5/components/navbar/ for more info. The mr-auto class was in the wrong place. It sets margin right to auto, which you should have on the parent component, not on the child

Upvotes: 0

Related Questions