Bootstrap element not hidden - html

Question

I wanna hidden search box in Small Devices(sm) size and instead of that a search button should take place. i wanna my search be like this at sm size.
enter image description here
this is my code:
<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="جستجو">
</div>
</div>
<div class="col-md-3 btn-header">
<button class="btn">ورود</button>
<button class="btn">ثبت نام</button>
</div>
</div>
</div><!-- =====HEADER DIV===== -->
</div>

Answer 1

Use
hidden-sm
for more details follow https://getbootstrap.com/docs/3.3/css/
<div class="input-group search-box">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fas fa-search"></i>
</span>
</div>
<!-- your search field is hidden in the sm -->
<input type="text" class="form-control hidden-sm" placeholder="جستجو">
</div>
Devices list
Extra small devices - Phones (<768px)
Small devices - Tablets (≥768px)
Medium devices -Desktops (≥992px)
Large devices -Desktops (≥1200px)

Answer 2

To show or hide elements with bootstrap you have to use the display utilities. For example, if you want to show only on Small Devices you must use d-none d-block d-sm-none.
Your code would be like this:
<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 d-none d-md-block">
<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="جستجو">
</div>
</div>
<div class="col-md-3 btn-header d-sm-none">
<button class="btn">ورود</button>
<button class="btn">ثبت نام</button>
</div>
</div>
</div><!-- =====HEADER DIV===== -->
</div>
You can find the doc here: https://getbootstrap.com/docs/4.0/utilities/display/