Justify content between - inside nav bar in bootstrap - html

Question

I've seen a similar question here but that answer didn't worked for me.
So the problem is that I want to justify content inside nav bar in bootstrap.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto justify-content-between">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle navbarDropdown" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Our Team</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle navbarDropdown" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Status</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle navbarDropdown" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Our Sevices</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contribute</a>
</li>
</ul>
</div>
</nav>
Here's a live example : https://jsfiddle.net/oberknezev/adcybshm/1/
"Home" item should go to all the way to the left and "contributors" all the way to the right with space between items justifed.
Tried with inline d-flex class, justify-content-between but nothing changes.
I guess it's something stupid but after 3 hours of trying, squinting, searching and reading all the stuff, I'm still lost why this isn't working when it's working on some simpler examples that I've tried.
Thanks

Answer 1

You need to specify that the nav flexbox needs to take up all of the available space of the parent element. You can do that by adding flex: 1 to it, like below:
.navbar-nav,
.mr-auto {
flex: 1;
margin: auto !important;
display: flex;
justify-content: space-between;
}

Answer 2

I know a way to make what you need, but... I don't know if it is a correct way to solve that.
In your <ul> tag, add the Bootstrap class .w-100. Example below:
<ul class="nav navbar-nav w-100 justify-content-between">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
</ul>
That class is the same to say you're given a 100% width to your <ul> So...
If you're using a old Bootstrap version, you can give a class to your <ul> like .Width and give that class a width of your choice, like below:
.Width
{
width: 100%;
}