Last Updated in 2019
With the introduction of Bootstrap 4, the Navbar now utilizes flexbox, making it simpler to create a full-width search input. You can achieve this by using the w-100 and d-inline utility classes:
<form class="mx-2 my-auto d-inline w-100">
<div class="input-group">
<input type="text" class="form-control" placeholder="...">
<span class="input-group-append">
<button class="btn btn-outline-secondary" type="button">GO</button>
</span>
</div>
</form>
Visit this link for a live example
Here is an alternate example where the search input is placed outside the collapsing navbar:
<!-- search input not in navbar collapse -->
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<div class="d-flex flex-grow-1">
<a href="/" class="navbar-brand">Codeply</a>
<form class="mr-2 my-auto w-100 d-inline-block order-1">
<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">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</form>
</div>
<button class="navbar-toggler order-0" type="button" data-toggle="collapse" data-target="#navbar7">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse flex-shrink-1 flex-grow-0 order-last" id="navbar7">
<ul class="navbar-nav">
..
</ul>
</div>
</nav>
Visit this link for a live example
Lastly, see this variation where the search width adjusts based on the device, inspired by this response
For Bootstrap 3:
You can utilize the text-truncate hack on the last navbar li like so:
<li class="text-truncate">
<form class="input-group">
<input class="form-control" name="search" placeholder="Search Here" autocomplete="off" autofocus="autofocus" type="text">
<div class="input-group-btn">
<button class="btn btn-outline-success" type="submit">Search</button>
</div>
</form>
</li>
In Bootstrap 4, text-truncate will set:
overflow: hidden;
white-space: nowrap;
This allows the search form to occupy the remaining width without wrapping.
Check out the Demo:
Another option is to use table-cell:
<form>
<div class="table-cell"> </div>
<div class="table-cell fill-width">
<input class="form-control" name="search" placeholder="Search Here" autocomplete="off" autofocus="autofocus" type="text">
</div>
<div class="table-cell">
<button class="btn btn-outline-success" type="submit">Search</button>
</div>
</form>