how do i make nav-item to the right without getting collapsed - html

Question

aight hello there, so im using bootstrap 4 and trying to create a navbar menu
here is my code
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">Features</a></li>
<li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
</ul>
</div>
<ul class="navbar-nav"><li class="nav-item">Login</li></ul>
</nav>
So what im trying here is I want a navbar menu and some items but I want some items not be collapsed and at the same time to be in the right.
I tried moving the item I want to be in the right moved to after toggler button and it's working exactly as I want, but in small devices and in desktop device it shows back to the left.
I tried moving the item I want to be in the right after the div collapse element but it collapses in small devices.

Answer 1

The problem was solved by separating the navbars into two separate divs, using bootstrap4 row and col, and giving a padding of 0 to the two separate divs. I used an in-line style to position the Login item but this is just for illustration purposes. It would be better to convert the in-line style into a class.
<div class="container-fluid">
<div class="row">
<div class="col-8 p-0">
<nav class="navbar navbar-expand-lg navbar-light bg-light" style="height:4rem;">
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarText" aria-controls="navbarText"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">Features</a></li>
<li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
</ul>
</div>
</nav>
</div>
<div class="col-4 p-0 ">
<nav class="navbar-nav navbar-light bg-light" style="height:4rem;">
<ul class=" list-unstyled mr-4" style="margin-top:1rem;"> <li class=" float-right">Login</li>
</ul>
</nav>
</div>
</div>
</div>