<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="searchInput"> <input type="text" class="searchField"> <label for="search" class="glyphicon glyphicon-search" rel="tooltip" title="search"></label> </div> </div> </div>

.searchField { display: inline-block; width: 98%; height: 38px; margin: 10px; border: 1px solid grey; font-size: 20px; outline: grey; padding: 5px; padding-right: 50px; cursor: pointer; color: grey; box-sizing:border-box; } .searchInput { position: relative; } .searchInput .glyphicon { position: absolute; z-index: 2; right: 25px; font-size: 24px; width: 24px; color: #4b4b4b; text-align: center; padding: 6px 0; top: 11px; cursor: pointer; }