Justify content between - inside nav bar in bootstrap

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

Solution 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;
}

Solution 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%;
}