<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"> <h1 class=text-center> Cool Search box using bootstrap</h1><br><hr> <div class="row"> <div class="col-xs-10 col-xs-offset-1"> <form action="#" method="#" role="search"> <div class="input-group"> <input class="form-control" placeholder="Search . . ." name="srch-term" id="ed-srch-term" type="text"> <div class="input-group-btn"> <button type="submit" id="searchbtn"> search</button> </div> </div> </form> </div> </div> </div>

.form-group { margin:0; padding:20px ; &:first-child { border-color: transparent; } } .form-control { padding: 0px 10px 0 20px; margin-top: 10px; color: #333; font-size: 28px; font-weight: 500; border: 3px solid #555; -webkit-box-shadow: none; box-shadow: none; min-height:60px; height: auto; border-radius: 50px 0 0 50px !important; } .form-control :focus { -webkit-box-shadow: none; box-shadow: none; border-color: transparent; } #searchbtn { border:0; padding: 0px 10px; margin-top: 10px; color: #fff; background:#888; font-size: 27px; font-weight: 500; border: 3px solid #555; border-left: none; -webkit-box-shadow: none; box-shadow: none; min-height:60px; height: auto; border-radius: 0 50px 50px 0 !important; }