Looking for a way to create a search form with a width of 100% and a minimum width within a Bootstrap 4 navbar? Check out my code snippet here.
<nav class="navbar navbar-expand-md navbar-light bg-faded">
<a href="/" class="navbar-brand">Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar5">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="navbar5">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">LongLink1 <span class="sr-only">Home</span></a>
</li>
<li class="nav-item"><a class="nav-link" href="#">LongLink2</a></li>
<li class="nav-item"><a class="nav-link" href="#">LongLink3</a></li>
<li class="nav-item"><a class="nav-link" href="#">LongLink4</a></li>
<li class="nav-item"><a class="nav-link" href="#">LongLink5</a></li>
<li class="nav-item"><a class="nav-link" href="#">LongLink6</a></li>
<li class="nav-item"><a class="nav-link" href="#">LongLink7</a></li>
</ul>
</div>
<form class="w-100 py-2">
<input type="text" class="form-control border" placeholder="Search...">
</form>
I decided to place the form outside the collapsible area so that it remains visible regardless of screen size. Everything is working well except in Tablet mode (Viewport width around 880px), where the search box appears too narrow. I'm aiming to add a "min-width" property and have the form move to the second line if its size doesn't meet the requirement.