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.