<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"> <h2>Responsive top navbar with search box</h2> </div> </div> <!-- top navbar --> <div class="top-navbar"> <div class="container"> <div class="row text-center"> <div class= "col-md-6" > <div class="pull-left" style="color: #ddd;padding-top: 10px;"> <a class="tel" href="tel:1800-1035-366" style="color: #ddd;"> <i class="fa fa-phone"></i> Call Us: +91-1234567890</a> </div> </div> <div class="col-md-6"> <div class="inner-addon right-addon search-icon"> <i class="glyphicon glyphicon-search "></i> <input type="text" placeholder="Search" class="form-control search-box" /> </div> </div> </div> </div> </div> <!-- end top navbar-->

.top-navbar { background: #2e2e2e none repeat scroll 0 0; /*color: #d6d6d6; padding: 5px 0; */} .search-box { width: 250px; cursor: pointer; margin: 0 auto; border: .5px solid rgb(232, 238, 241); border-radius: 28px; color: rgb(119, 126, 128); text-align: center; -o-text-overflow: clip; text-overflow: clip; letter-spacing: 1px; background: #fff; } .search-icon { width: 250px; padding: 5px; border-radius: 24px; float: right; } .inner-addon { position: relative; } /* style icon */ .inner-addon .glyphicon { position: absolute; padding: 13px; pointer-events: none; } .left-addon .glyphicon { left: 0px;} .right-addon .glyphicon { right: 0px;} .left-addon input { padding-left: 30px; } .right-addon input { padding-right: 30px; }