input-group-addon with bootstrap-select
From Bootstrap docs:
Extend form controls by adding text or buttons before, after, or on both sides of any text-based
<input>. Use.input-groupwith an.input-group-addonor.input-group-btnto prepend or append elements to a single.form-control.
You need to wrap the select and .input-group-addon in a .input-group:
<div class="input-group"> <span class="input-group-addon">Label 2</span> <select id="lunch" class="selectpicker form-control" data-live-search="true" title="Please select a lunch ..."> <option>Hot Dog, Fries and a Soda</option> <option>Burger, Shake and a Smile</option> <option>Sugar, Spice and all things nice</option> <option>Baby Back Ribs</option> <option>A really really long option made to illustrate an issue with the live search in an inline form</option> </select></div>Check it out:
I've modified caeth's solution with additional CSS to ensure the select button is rounded at their respective corners.
HTML
<form class="form-inline"> <div class="input-group"> <span class="input-group-addon">Label</span> <select id="lunch" class="selectpicker form-control" data-live-search="true" title="Please select a lunch ..."> <option>Hot Dog, Fries, and a Soda</option> <option>Burger, Shake, and a Smile</option> <option>Sugar, Spice, and all things nice</option> <option>Baby Back Ribs</option> <option>A really really long option made to illustrate an issue with the live search in an inline form</option> </select> </div></form>CSS
.input-group > .input-group-btn:last-child > .selectpicker { border-top-right-radius: 5px; border-bottom-right-radius: 5px;}.input-group > .input-group-btn:first-child > .selectpicker { border-top-left-radius: 5px; border-bottom-left-radius: 5px;}See it here: http://jsfiddle.net/xr4uofje/130/
I've just found an easy way to include add-ons with select (no bootstrap-select). This answer might not be strictly related to the bootstrap-select question, but might be helpful for someone landing here looking for this answer (as I did). I just move the select under the add-on, with margin:-4px, and add 4 pixels to the width like this
.input-group select.form-control { margin-left: -4px; width: calc(100% + 4px);}and then I set a relative position and z-index to the add-on, like this:
.input-group .input-group-addon { z-index: 5; position: relative;}I hope this helps