Rob Gunsuka
Rob Gunsuka

Reputation: 725

Bootstrap 4 NAVBAR with three items

I am attempting to use Bootstrap 4, with three items in the navbar. I want the brand on the left, navbar-nav items on the right.

That part is straight forward, my issue is that I want another section that should be left aligned, next to BRAND.

It does what I want when the screen is large (see bellow).

enter image description here

My issue is when the screen gets smaller. The 3rd item jumps into the middle and I can't figure out why.

enter image description here

The documentation leads me to believe I might be able to use flex behaviors but nothing I have tried works.

Can this be done out of the box?

I've setup some sample code on codeply, which can be seen here: http://codeply.com/go/6y6XapGG4k

You can see when the view port is large the example.com button shows on the left. When the screen shrinks and the menu item contracts the example.com button jumps into the middle of the screen.

I am trying to keep the button on the left side, next to BRAND.

Upvotes: 0

Views: 78

Answers (1)

Iulius
Iulius

Reputation: 678

Add "mr-auto" class to your "navbar-nav"

<div class="navbar-nav mr-auto">
    <div class="dropdown">
      <button class="btn btn-outline-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown">
            example.com
      </button>
    </div>
</div>

Upvotes: 1

Related Questions