Using Bootstrap 4, I aim to customize the inline form in the navbar to have a specific width on laptops and extend to the full screen on mobile devices.
Here is how it appears on my mobile device: https://i.sstatic.net/gjewu.png
https://i.sstatic.net/KJhnr.png
This is the HTML code I am using:
<nav class="navbar navbar-expand-lg fixed-top navbar-transparent " color-on-scroll="300" style="text-transform: capitalize;">
<div class="d-flex flex-grow-1">
<a href="/" class="navbar-brand">AutoGram</a>
<form class="form-inline" action="/search">
<div class="input-group mb-10 ">
<input type="text" class="form-control from-control-sm" id="q" name="q" placeholder="Enter Brand,Model,Variant for search" >
<div class="input-group-append">
<span class="input-group-text" style="color:whitesmoke; background-color: black;" id="SearchButton">Search</span>
</div>
</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">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
My goal is to widen the input box and center it in the laptop view, while in the mobile view, I want the input group to extend up to the toggle bar.