How to move button to left side in navbar?

Question

I am not able to figure out this simple task. I need to place the button to the left side.

html

<body>

    <nav class="navbar navbar-dark fixed-top bg-info flex-md-nowrap p-0">

        <a class="navbar-brand col-md-2 mr-0" href="#">Web name</a>

        <button class="btn btn-primary btn-sm float-left">
            <span data-feather="toggle-left"></span>
        </button>

        <span class="text-nowrap" style="color:white; margin-right:20px;"><span data-feather="user"></span>username</span>

    </nav>
...
</body>

The `navbar` class in Bootstrap 4 is a flex-box that attempts to space child elements evenly within the navbar with the rule `justify-content: space-between`. [This post](https://stackoverflow.com/questions/41513463/bootstrap-4-align-navbar-items-to-the-right) has an answer which should help! — Wrokar, Apr 24 '18 at 16:57

Carol Skelly · Accepted Answer · 2018-04-25T11:16:25.137

Replace float-left with mr-auto for auto right margin. This will make the button push back to the left.

<nav class="navbar navbar-dark fixed-top bg-info flex-md-nowrap p-0">
    <a class="navbar-brand col-md-2 mr-0" href="#">Web name</a>
    <button class="btn btn-primary btn-sm mr-auto">
        <span data-feather="toggle-left"></span>
    </button>
    <span class="text-nowrap" style="color:white; margin-right:20px;"><span data-feather="user"></span>username</span>
</nav>

https://www.codeply.com/go/SQD3e4YHMY

Related: Bootstrap NavBar with left, center or right aligned items

How to move button to left side in navbar?

1 Answers1