Recently delving into front-end development, I've been working on designing a webpage that includes a search box (you can view the jsfiddle here). I decided to borrow the navbar component from https://getbootstrap.com/docs/5.0/components/navbar/ and made some tweaks to showcase the searchbox before the navigation items and right-align those items. My current challenge is getting the searchbox to span from the navbar-brand to the nav items, but I am struggling to achieve that. I've scoured the web for solutions, but most of them are tailored to previous Bootstrap versions that don't quite translate to Bootstrap 5.
Below is an excerpt of my code:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#"><img src="images/logo.png" alt="Brand image" width="180" height="52"></img></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<form class="d-flex ms-auto me-auto">
<input class="form-control" id="searchbox" type="search" placeholder="Search" aria-label="Search"></input>
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
<ul class="navbar-nav ms-auto mb-2 mb-lg-0 d-flex">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Login</a>
</li>
</ul>
</div>
</div>
</nav>
And here's a snippet from my CSS file:
#searchbox{
width: 100%;
}
I included width:100% based on a solution I found here, but it seems not to work well with Bootstrap 5.