Reputation: 725
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).
My issue is when the screen gets smaller. The 3rd item jumps into the middle and I can't figure out why.
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
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