<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 ----------> <div class="container"> <h5>Bootstrap 4 Search Bar</h5> <div class="row"> <div class="col-12"> <div class="input-group"> <input class="form-control border-secondary py-2" type="search" value="search"> <div class="input-group-append"> <button class="btn btn-outline-secondary" type="button"> <i class="fa fa-search"></i> </button> </div> </div> </div> </div> </div>