How to stretch the searchbox in a navbar using bootstrap 5? - html

Question

I'm new to front-end development and I am trying to design a page that also has a searchbox(here's the jsfiddle https://jsfiddle.net/he40tr9z/1/). I copied the navbar component from https://getbootstrap.com/docs/5.0/components/navbar/ and did some minimal modifications to make the searchbox appear before the nav items and to right align the nav items. Now I want the searchbox to stretch from the navbar-brand to the nav items but I can't seem to do that. I've searched the web and all the solutions I've found were for previous versions of Bootstrap which when applied to Bootstrap 5 don't work.
Here's my code snippet:
<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>
Here is the code from my css file:
#searchbox{
width: 100%;
}
I put width:100% cause I saw it in this solution Bootstrap: stretching navbar input box but it doesn't work for Bootstrap 5.

Answer 1

Just use w-100 on the containing form...
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#"><img src="//via.placeholder.com/180x52" alt="Brand image" width="180" height="52"></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 border w-100">
<input class="form-control" id="searchbox" type="search" placeholder="Search" aria-label="Search">
<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>
Codeply