<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="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row m-t-50"> <h1 class="text-center">Bootstrap Search button next to input</h1> <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3 col-lg-6 col-lg-offset-3"> <form role="Form" action="" method="POST" charset="UTF-8"> <div class="form-group"> <div class="input-group"> <input class="form-control" type="text" name="search" placeholder="Search..." required/> <span class="input-group-btn"> <button class="btn btn-success" type="submit"><span class="glyphicon glyphicon-search" aria-hidden="true"></span>Search</button> </span> </div> </div> </form> </div> </div> <div class="row m-t-30"> <h1 class="text-center">Search with icon inside input left</h1> <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3 col-lg-6 col-lg-offset-3"> <form role="Form" action="" method="POST" charset="UTF-8"> <div class="input-search"> <span class="glyphicon glyphicon-search" aria-hidden="true"></span> <input type="text" name="search" placeholder="Search..." class="form-control input-box"> </div> </form> </div> </div> <div class="row m-t-30"> <h1 class="text-center">Search with icon inside input right</h1> <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3 col-lg-6 col-lg-offset-3"> <form role="Form" action="" method="POST" charset="UTF-8"> <div class="input-search-3"> <input type="text" name="search" placeholder="Search..." class="form-control input-box"> <span class="glyphicon glyphicon-search" aria-hidden="true"></span> </div> </form> </div> </div> <div class="row m-t-30"> <h1 class="text-center">Search with button inside input left</h1> <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3 col-lg-6 col-lg-offset-3"> <form role="Form" action="" method="POST" charset="UTF-8"> <div class="input-search-4"> <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button> <input type="text" name="search" placeholder="Search..." class="form-control input-box"> </div> </form> </div> </div> <div class="row m-t-30 m-b-50"> <h1 class="text-center">Search with button inside input right</h1> <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3 col-lg-6 col-lg-offset-3"> <form role="Form" action="" method="POST" charset="UTF-8"> <div class="input-search-5"> <input type="text" name="search" placeholder="Search..." class="form-control input-box"> <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button> </div> </form> </div> </div> </div>

/* GENERAL CSS */ .m-t-30 { margin-top: 30px; } .m-t-50 { margin-top: 50px; } .m-b-50 { margin-bottom: 50px; } /* END GENERAL CSS */ /* EXAMPLE 1 */ .glyphicon-search { margin-right: 5px; } /* END EXAMPLE 1 */ /* EXAMPLE 2 */ .input-search { position: relative; } .input-search input { padding-left: 40px; } .input-search span { font-size: 20px; position: absolute; top: 8px; left: 8px; color: #ccc; } /* END EXAMPLE 2 */ /* EXAMPLE 3 */ .input-search-3 { position: relative; } .input-search-3 input { padding-right: 40px; } .input-search-3 span { font-size: 20px; position: absolute; top: 8px; right: 8px; color: #ccc; } /* END EXAMPLE 3 */ /* EXAMPLE 4 */ .input-search-4 { position: relative; } .input-search-4 input { padding-left: 50px; } .input-search-4 button { position: absolute; top: 0px; left: 0px; color: #ccc; } /* END EXAMPLE 4 */ /* EXAMPLE 5 */ .input-search-5 { position: relative; } .input-search-5 input { padding-right: 50px; } .input-search-5 button { position: absolute; top: 0px; right: 0px; color: #ccc; } /* END EXAMPLE 5 */