menu
search
Basic usage

Bootstrap-select was designed to be a replacement for the standard <select> box that is displayed by the browser. By default it supports all options and operations that are available in a standard select box, but with added flexibility.

With placeholder

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

With optgroups

Bootstrap-select support group related options with <optgroup> tags

Divider

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

Subtext

Add subtext to an option or optgroup with the data-subtext attribute

Multiple select boxes

Bootstrap-select also supports multi-value select boxes. The select below is declared with the multiple attribute.

Select / deselect all options

Adds two buttons to the top of the menu - Select All & Deselect All with data-actions-box="true".

Limit selection

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

Selected text

Set the title attribute on individual options to display alternative text when the option is selected.

Live search

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

Custom content

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

Creatable

If no results matched you can press Enter to add your input.
Can also be used as input tags for Multiple select boxes.

Sizing

Set size with data-bs-select-size attribute.

Clearable

Add a clear button ("x" icon) to appear on the select box when a value is selected. Clicking the clear button will clear the selected value, effectively resetting the select box back to its placeholder value.