<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous"> <div class="container"> <div class="row"> <h2>Search Form - CSS</h2> <form action="" class="search-form"> <div class="search-form style-1"> <!--<label for="search">Search</label>--> <input type="text" class="form-control" name="search" id="search" placeholder="search"> <span class="search-icon"> <i class="fas fa-search h4 text-body"></i> </span> </div> </form> </div> </div>

.container { margin: 19px auto; text-align: center; } h2 { width: 100%; } .search-form { display: block; position: relative; } .search-form .search-icon i { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); cursor: pointer; }