<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 ----------> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css"> <!-- Latest compiled and minified JavaScript --> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script> <div class="container"> <div class="row"> <h2>Selectpicker inside an input-group</h2> <h3>Full width example</h3> <div class="input-group"> <span class="input-group-addon"> <span class="glyphicon glyphicon-eye-open"></span> </span> <div class="form-control form-control-selectpicker"> <select> <option value="0">Show All</option> <option value="1" selected="selected">Show Only Active</option> </select> </div> </div> <h3>Column width example</h3> <p>Two columns side by side.</p> <div class="row"> <div class="col-md-6"> <div class="input-group"> <span class="input-group-addon"> Fruit </span> <div class="form-control form-control-selectpicker"> <select> <option value="0">Show All</option> <option value="1" selected="selected">Apple</option> <option value="2">Banana</option> <option value="3">Pear</option> </select> </div> </div> </div> <div class="col-md-6"> <div class="input-group"> <span class="input-group-addon"> <span class="glyphicon glyphicon-heart"></span> Vegetable </span> <div class="form-control form-control-selectpicker"> <select> <option value="0">Show All</option> <option value="1" selected="selected">Carrot</option> <option value="2">Cabbage</option> <option value="3">Pepper</option> </select> </div> </div> </div> </div> <h3>Full width example with input</h3> <div class="input-group"> <span class="input-group-addon"> <span class="glyphicon glyphicon-search"></span> </span> <input type="text" name="query" class="form-control form-control-6" placeholder="Search for..."> <div class="form-control form-control-6 form-control-selectpicker"> <select> <option value="0">Jnow Son</option> <option value="1" selected="selected">Dargaryen Taenerys</option> <option value="2">Glegane Cregor</option> <option value="3">Cannister Lersei</option> </select> </div> </div> </div> </div>

.input-group .form-control.form-control-selectpicker { padding: 0; } .input-group .form-control.form-control-selectpicker > .btn-group.bootstrap-select { width: 100%; } .input-group .form-control-6 { width: 50%; } .input-group .form-control.form-control-selectpicker .btn-group .btn { border: 0; } .input-group .form-control.form-control-selectpicker .btn-group.open .btn { border-radius: 0; }

$(function(){ $('select').selectpicker(); });