I'm trying to create a navbar using Bootstrap 3.7.7 with a logo on the left, links on the right in two rows, and a large search bar in the center. I've managed to align the logo and links correctly, but I'm struggling with sizing the search bar. Here's the code I'm currently using:
<div class="navbar navbar-inverse navbar-fixed-top navcustom">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-target=".navbar-collapse" data-toggle="collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="logo" href="#">
<img class="img-responsive" src="~/img/finalogo.png" class="img-responsive"/>
</a>
</div>
<div class="navbar-collapse collapse" id="searchbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="about.html">About</a></li>
<li><a href=""><i class="icon-user"></i> My Page</a></li>
<li><a href="#loginform" data-toggle="modal">Login</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a title="Start a new search" href="#">Clear</a></li>
</ul>
<div class="form-group">
<input class="form-control" type="text" placeholder="Search">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div><!--/.nav-collapse -->
</div>
</div>
However, I'm having trouble adjusting the size of the search bar. Here is an image for reference: https://i.sstatic.net/kRTJU.png
If anyone can provide assistance, I would greatly appreciate it. Thank you!