<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="inline-group"> <input type="text" name="search" class="form-control inline-item" placeholder="Search ?"/> <input type="text" name="search2" class="form-control inline-item" placeholder="Search2 ?"/> <select name="select" class="form-control inline-item"> <option>-- Select --</option> </select> <input type="text" name="search2" class="form-control inline-item" placeholder="Search2 ?"/> <input type="button" class="btn btn-primary inline-item" value="Ok" /> </div> </div>

.inline-group{ display: table; width: 100%; table-layout: fixed; border-collapse: separate; } .inline-group>.inline-item { display: table-cell; float: none; width:auto; margin-left:-1px; } .inline-group>select.inline-item,.inline-group>.btn.inline-item{ margin-bottom:2px; } .inline-group>.inline-item:first-child:not(:last-child){ border-top-right-radius: 0; border-bottom-right-radius: 0; margin-left:0; } .inline-group>.inline-item:not(:first-child):not(:last-child){ border-radius:0; } .inline-group>.inline-item:last-child:not(:first-child){ border-top-left-radius: 0; border-bottom-left-radius: 0; } .inline-group>.inline-item:last-child:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }