0

Bootstrap select inputs with multiselection, searching and grouping

Limit the number of selections

<select class="selectpicker" multiple data-max-options="2">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

<select class="selectpicker" multiple>
  <optgroup label="Condiments" data-max-options="2">
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
  </optgroup>
  <optgroup label="Breads" data-max-options="2">
    <option>Plain</option>
    <option>Steamed</option>
    <option>Toasted</option>
  </optgroup>
</select>
RUN

Button classes

<div class="form-group">
  <select class="selectpicker" data-style="btn-primary">
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
  </select>
  </div>
  <div class="form-group">
  <select class="selectpicker" data-style="btn-info">
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
  </select>
  </div>
  <div class="form-group">
  <select class="selectpicker" data-style="btn-success">
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
  </select>
  </div>
  <div class="form-group">
  <select class="selectpicker" data-style="btn-warning">
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
  </select>
  </div>
  <div class="form-group">
  <select class="selectpicker" data-style="btn-danger">
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
  </select>
</div>
RUN

Subtext

<select class="selectpicker">
  <option data-subtext="French's">Mustard</option>
  <option data-subtext="Heinz">Ketchup</option>
  <option data-subtext="Sweet">Relish</option>
  <option data-subtext="Miracle Whip">Mayonnaise</option>
  <option data-divider="true"></option>
  <option data-subtext="Honey">Barbecue Sauce</option>
  <option data-subtext="Ranch">Salad Dressing</option>
  <option data-subtext="Sweet & Spicy">Tabasco</option>
  <option data-subtext="Chunky">Salsa</option>
</select>

<select class="selectpicker" data-show-subtext="true">
  <option data-subtext="French's">Mustard</option>
  <option data-subtext="Heinz">Ketchup</option>
  <option data-subtext="Sweet">Relish</option>
  <option data-subtext="Miracle Whip">Mayonnaise</option>
  <option data-divider="true"></option>
  <option data-subtext="Honey">Barbecue Sauce</option>
  <option data-subtext="Ranch">Salad Dressing</option>
  <option data-subtext="Sweet & Spicy">Tabasco</option>
  <option data-subtext="Chunky">Salsa</option>
</select>
RUN
add comment
Suggest a different solution or add another example