In my navbar, I have items aligned on the left and a search bar aligned on the right. However, when I try to move the items to the right using the ms-auto class, only the items move and the search bar stays in place. How can I adjust the alignment so that the items stay on the right while the search bar moves to the left?
Is there a way to rotate the navbar to achieve this layout?
Below is the code snippet:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<div class="collapse navbar-collapse" id="navbarScroll">
<ul class="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll" style="--bs-scroll-height:100px;">
<li class="nav-item">
<a href="#" class="nav-link active" aria-current="page">Home</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">About us</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Contact us</a>
</li>
</ul>
<form class="d-flex">
<input type="search" class="form-control me-2" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>