I'm currently working on designing a navbar that includes a Search option and Login options. My goal is to have the Search bar aligned to the right, just before the Signup link. Any assistance with this would be greatly appreciated.
Thank you in advance.
Here's the code I have so far:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<div class="container">
<a href="#" class="navbar-brand "><i class="fa fa-camera-retro"></i> Photo Gallery</a>
<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>
<form class="form-inline my-2 my-lg-0" id="search-form">
<div class="input-group">
<input type="text" class="form-control border border-right-0" placeholder="Search...">
<span class="input-group-append">
<button class="btn btn-outline-light border border-left-0" type="button" id="search-button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</form>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item ">
<a class="nav-link" href="#">Sign Up <i class="fa fa-user-plus"></i></a>
</li>
<li class="nav-item ">
<a class="nav-link" href="#">Login <i class="fa fa-user"></i></a>
</li>
</ul>
</div>
</div>
</nav>