View on GitHub

Bootstrap-select

A custom select for @twitter bootstrap using button dropdown.

Download this project as a .zip file Download this project as a tar.gz file

bootstrap-select

A custom select for @twitter Bootstrap using button dropdown.

Example

Make this:

Become this:

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

It also works with option groups:

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

You can set different Bootstrap classes via the data-style attribute:

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

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

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

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

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

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

You can also use the title tag as an alternative to display when the option is selected:

  <select class="selectpicker">
    <option title="Combo 1">Hot Dog, Fries and a Soda</option>
    <option title="Combo 2">Burger, Shake and a Smile</option>
    <option title="Combo 3">Sugar, Spice and all things nice</option>
  </select>

Classes added to the options are transferred to the select:

  <select class="selectpicker">
    <option>Mustard</option>
    <option class="special">Ketchup</option>
    <option>Relish</option>
  </select>
  .special {
    font-style: italic; 
    font-weight: bold !important;
    color:#bc0000 !important; 
    background:#000;
  }

Apply .span* class to the selects to set the width.

  <div class="row-fluid">
    <select class="selectpicker span2">
      ...
    </select>
  </div>

Add the .disabled attribute to the select to apply the disabled class.

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

Adding disabled="disabled" to an option transfers to the menu.

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

The size option is set to 'auto' by default. When size is set to 'auto', the menu always opens up to show as many items as the window will allow without being cut off. Set size to false to always show all items. The size of the menu can also be specifed using the data-size attribute.

  <select class="selectpicker">
    ...
  </select>

Note: this is the same as:
<select class="selectpicker" data-size="auto"> ... </select>

Specify a number for data-size to choose the maximum number of items to show in the menu.

  <select class="selectpicker" data-size="5">
    ...
  </select>

Add data-divider="true" to an option to turn it into a divider.

  <select class="selectpicker">
    ...
    <option data-divider="true"></option>
    ...
  </select>

Make the select a dropup menu by adding the .dropup class to the select.

  <select class="selectpicker dropup">
    ...
  </select>

Usage

Create your <select> with the .selectpicker class.

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

Enable Bootstrap-Select via JavaScript:

  $('.selectpicker').selectpicker();

Options can be passed via data attributes or JavaScript.

  $('.selectpicker').selectpicker({
      style: 'btn-info',
      size: 4
  });