<div class="main">
<!-- Actual search box -->
<div class="form-group has-search">
<span class="fa fa-search form-control-feedback"></span>
<input type="text" class="form-control" placeholder="Search">
</div>
<!-- Another variation with a button -->
<div class="input-group">
<input type="text" class="form-control" placeholder="Search this blog">
<div class="input-group-append">
<button class="btn btn-secondary" type="button">
<i class="fa fa-search"></i>
</button>
</div>
</div>
<p class="mt-4 text-center"><a href="https://www.gungorbudak.com/blog/2018/12/12/bootstrap-4-search-box-with-search-icon/">See how it's done on my blog</a></p>
</div>
/* Styles for wrapping the search box */
.main {
width: 50%;
margin: 50px auto;
}
/* Bootstrap 4 text input with search icon */
.has-search .form-control {
padding-left: 2.375rem;
}
.has-search .form-control-feedback {
position: absolute;
z-index: 2;
display: block;
width: 2.375rem;
height: 2.375rem;
line-height: 2.375rem;
text-align: center;
pointer-events: none;
color: #aaa;
}
This Pen doesn't use any external JavaScript resources.