Justifying a navbar in Bootstrap 4

encountered same issue with me but with logo. I just added nav-justified & w-100 classes along with the navbar-nav class.

Here the screenshot of navbar.

Here The Code:

<nav class="navbar navbar-toggleable-md navbar-light bg-faded px-5">
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <a class="navbar-brand" href="#">
            <img src="img/logo.png" class="img-fluid" alt="Logo">
        </a>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav nav-justified w-100">
                <li class="nav-item active">
                    <a class="nav-link" href="#">About us</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#"> Services</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">  Mission & Vission</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Brands
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                        <a class="dropdown-item" href="#">Alo maids</a>
                        <a class="dropdown-item" href="#">Alo Technical</a>
                        <a class="dropdown-item" href="#">Something else here</a>
                    </div>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">   Brands</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">   Brands</a>
                </li>
            </ul>
        </div>
    </nav>

Add class w-100 @ navbar

And add class nav-fill w-100 @ navbar-nav

<nav class="navbar navbar-expand-lg navbar-light w-100">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nvb1" aria-controls="nvb1" aria-expanded="false" aria-label="Menu switcher">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="nvb1">
        <ul class="navbar-nav nav-fill w-100">
            <li class="nav-item active"><a href="{{ url('/') }}" class="nav-link">Home</a></li>
            <li class="nav-item"><a href="{{ url('') }}" class="nav-link">Links</a></li>
            <li class="nav-item"><a href="{{ url('') }}" class="nav-link">Links</a></li>
        </ul>
    </div>
</nav>

https://jsfiddle.net/Cotiga/84kc3rqL/

You could use nav-justified, making sure the navbar-nav is full width using w-100...

<ul class="navbar-nav w-100 nav-justified">
      <li class="nav-item">..<li>
      <li class="nav-item">..<li>
</ul>

https://codeply.com/go/od0TnGfQv2