Examples

This page contains various examples demonstrating the features and customization options of bootstrap-select.

Basic Examples

Standard Select Boxes

To turn a standard select box:

Into a bootstrap-select box, simply add the .selectpicker class:

<select class="selectpicker">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

Select Boxes with Optgroups

<select class="selectpicker">
  <optgroup label="Picnic">
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
  </optgroup>
  <optgroup label="Camping">
    <option>Tent</option>
    <option>Flashlight</option>
    <option>Toilet Paper</option>
  </optgroup>
</select>

Multiple Select Boxes

<select class="selectpicker" multiple>
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

Live Search

You can add a search input by passing the data-live-search="true" attribute:

<select class="selectpicker" data-live-search="true">
  <option>Hot Dog, Fries and a Soda</option>
  <option>Burger, Shake and a Smile</option>
  <option>Sugar, Spice and all things nice</option>
</select>

Keywords

Add keywords to options to improve their searchability using data-tokens.

<select class="selectpicker" data-live-search="true">
  <option data-tokens="ketchup mustard">Hot Dog, Fries and a Soda</option>
  <option data-tokens="mustard">Burger, Shake and a Smile</option>
  <option data-tokens="frosting">Sugar, Spice and all things nice</option>
</select>

Limit Selections

Limit the number of options that can be selected via the data-max-options attribute. It also works for option groups.

<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>

Custom Button Text

Placeholder

Using the title attribute will set the default placeholder text when nothing is selected.

<select class="selectpicker" multiple title="Choose one of the following...">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

Selected Text Format

Specify how the selection is displayed with the data-selected-text-format attribute on a multiple select. Supported values are:

values: A comma-delimited list of selected values (default).
count: Displays the number of selected items (e.g., 2 of 6 selected).
count > x: Displays values until x items are selected, then switches to the count format.
static: Always shows the placeholder title.

<select class="selectpicker" multiple data-selected-text-format="count > 3">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
  <option>Onions</option>
</select>

Styling

Button Classes

Set the button style classes via the data-style attribute.

<select class="selectpicker" data-style="btn-primary">
  ...
</select>

<select class="selectpicker" data-style="btn-success">
  ...
</select>

Width

Use the data-width attribute to set the width of the select.

auto: Automatically adjust the width to its widest option.
fit: Automatically adjust the width to the currently selected option.
A specific value, e.g., 300px or 50%.

<select class="selectpicker" data-width="auto">
  ...
</select>

<select class="selectpicker" data-width="fit">
  ...
</select>

<select class="selectpicker" data-width="150px">
  ...
</select>

Customize Options

Icons

Add an icon to an option using the data-icon attribute. Note: You'll need to use an icon font like FontAwesome and set the iconBase option accordingly.

<select class="selectpicker">
  <option data-icon="fa-heart">Ketchup</option>
  <option data-icon="fa-star">Mustard</option>
</select>

Custom Content

Insert custom HTML into an option with the data-content attribute.

<select class="selectpicker">
  <option data-content="<span class='badge badge-success'>Relish</span>">Relish</option>
</select>

Subtext

Add subtext to an option with the data-subtext attribute.

<select class="selectpicker" data-show-subtext="true">
  <option data-subtext="Heinz">Ketchup</option>
  <option data-subtext="French's">Mustard</option>
</select>