For Small Devices(sm) size, I want a hidden search box with a search button instead. This is how I want my search to look like in small devices: view image here
This is the code I have:
<div class="container">
<div class="header">
<div class="row">
<div class="col-md-3 ">
<img src="img/1.png" class="header-logo" alt="site-logo">
</div>
<div class="col-md-6">
<div class="input-group search-box">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fas fa-search"></i>
</span>
</div>
<input type="text" class="form-control" placeholder="Search">
</div>
</div>
<div class="col-md-3 btn-header">
<button class="btn">Login</button>
<button class="btn">Sign Up</button>
</div>
</div>
</div><!-- =====HEADER DIV===== -->
</div>