<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"> <h3> Search View. </h3> <hr> <div class="panel panel-primary filterable" style="background-color:transparent; height:400px"> <div class="panel-heading"> <h3 class="panel-title">Search</h3> </div> <div class="container"> <div class="row"> <div class="col-md-12"style="margin-top:10px"> <div class="input-group" id="adv-search"> <form class="form-horizontal" role="form" style="margin-top:50px"> <div class="form-group"> <label for="contain">First Name</label> <input class="form-control" type="text" /> </div> <div class="form-group"> <label for="contain">Gender</label> <input class="form-control" type="text" /> </div> <div class="form-group"> <label for="contain">Phone</label> <input class="form-control" type="text" /> </div> <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-search" aria-hidden="true"> Search</span></button> </form> </div> </div> </div> </div> </div> </div>

body { padding-top: 50px; } .dropdown.dropdown-lg .dropdown-menu { margin-top: -1px; padding: 6px 20px; } .input-group-btn .btn-group { display: flex !important; } .btn-group .btn { border-radius: 0; margin-left: -1px; } .btn-group .btn:last-child { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } .btn-group .form-horizontal .btn[type="submit"] { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } .form-horizontal .form-group { margin-left: 0; margin-right: 0; } .form-group .form-control:last-child { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } @media screen and (min-width: 768px) { #adv-search { width: 500px; margin: 0 auto; } .dropdown.dropdown-lg { position: static !important; } .dropdown.dropdown-lg .dropdown-menu { min-width: 500px; } .filterable { margin-top: 15px; } .filterable .panel-heading .pull-right { margin-top: -20px; } .filterable .filters input[disabled] { background-color: transparent; border: none; cursor: auto; box-shadow: none; padding: 0; height: auto; } .pagination>li { display: inline; padding:0px !important; margin:0px !important; border:none !important; } .filterable .filters input[disabled]::-webkit-input-placeholder { color: #333; } .filterable .filters input[disabled]::-moz-placeholder { color: #333; } .filterable .filters input[disabled]:-ms-input-placeholder { color: #333; } }