Basic examples
Standard select boxes
Make this:
Mustard Ketchup Relish
Become this:
Mustard Ketchup Relish
<select class="selectpicker">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
Select boxes with optgroups
Mustard Ketchup Relish Tent Flashlight Toilet Paper
<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
Mustard Ketchup Relish
<select class="selectpicker" multiple>
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
Live search
Live search
You can add a search input by passing data-live-search="true"
attribute:
Hot Dog, Fries and a Soda Burger, Shake and a Smile Sugar, Spice and all things nice
Key words
Add key words to options to improve their searchability using data-tokens
.
Hot Dog, Fries and a Soda Burger, Shake and a Smile Sugar, Spice and all things nice
<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 the number of selections
Limit the number of options that can be selected via the data-max-options
attribute. It also works for option groups. Customize the message displayed when the limit is reached with maxOptionsText
.
Mustard Ketchup Relish Mustard Ketchup Relish Plain Steamed Toasted
<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. This works for both multiple and standard select boxes:
Multiple Mustard Ketchup Relish
Standard Mustard Ketchup Relish
<select class="selectpicker" multiple title="Choose one of the following...">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
Selected text
Set the title
attribute on individual options to display alternative text when the option is selected:
Hot Dog, Fries and a Soda Burger, Shake and a Smile Sugar, Spice and all things nice
<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>
Selected text format
Specify how the selection is displayed with the data-selected-text-format
attribute on a multiple select.
The supported values are:
values
: A comma delimited list of selected values (default)count
: If one item is selected, then the option value is shown. If more than one is selected then the number of selected items is displayed, e.g.2 of 6 selected
count > x
: Wherex
is the number of items selected when the display format changes fromvalues
tocount
static
: Always show the select title (placeholder), regardless of selection
Mustard Ketchup Relish
<select class="selectpicker" multiple data-selected-text-format="count">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
Mustard Ketchup Relish Onions
<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
You can set the button classes via the data-style
attribute:
Mustard Ketchup Relish
Mustard Ketchup Relish
Mustard Ketchup Relish
Mustard Ketchup Relish
Mustard Ketchup Relish
<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>
Checkmark on selected option
You can also show the checkmark icon on standard select boxes with the show-tick
class:
Mustard Ketchup Relish
<select class="selectpicker show-tick">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
Menu arrow (deprecated)
The Bootstrap menu arrow can be added with the show-menu-arrow
class:
Note: This feature has been deprecated and will be removed in v2.0.0.
Mustard Ketchup Relish
<select class="selectpicker show-menu-arrow">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
Style individual options
Classes and styles added to options are transferred to the select box:
Mustard Ketchup Relish
<select class="selectpicker">
<option>Mustard</option>
<option class="special">Ketchup</option>
<option style="background: #5cb85c; color: #fff;">Relish</option>
</select>
.special {
font-weight: bold !important;
color: #fff !important;
background: #bc0000 !important;
text-transform: uppercase;
}
Width
Wrap selects in grid columns, or any custom parent element, to easily enforce desired widths.
Mustard Ketchup Relish
Mustard Ketchup Relish
Mustard Ketchup Relish
Mustard Ketchup Relish
Mustard Ketchup Relish
Mustard Ketchup Relish
<div class="row">
<div class="col-sm-3">
<div class="form-group">
<select class="selectpicker form-control">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
</div>
</div>
</div>
Alternatively, use the data-width
attribute to set the width of the select. Set data-width
to 'auto'
to automatically adjust the width of the select to its widest option. 'fit'
automatically adjusts the width of the select to the width of its currently selected option. An exact value can also be specified, e.g., 300px
or 50%
.
width: 'auto'
Mustard Ketchup Relish All of the above (and much, much more!)
width: 'fit'
Mustard Ketchup Relish All of the above (and much, much more!)
width: '150px'
Mustard Ketchup Relish All of the above (and much, much more!)
width: '75%'
Mustard Ketchup Relish All of the above (and much, much more!)
<select class="selectpicker" data-width="auto">
...
</select>
<select class="selectpicker" data-width="fit">
...
</select>
<select class="selectpicker" data-width="100px">
...
</select>
<select class="selectpicker" data-width="75%">
...
</select>
Customize options
Icons
Add an icon to an option or optgroup with the data-icon
attribute:
Note: Glyphicons are not included in Bootstrap 4. To use FontAwesome, or another icon library, you'll need to set iconBase
to something other than 'glyphicon'
.
Mustard Ketchup Relish Mayonnaise Barbecue Sauce
<select class="selectpicker">
<option data-icon="fa-heart">Ketchup</option>
</select>
Custom content
Insert custom HTML into the option with the data-content
attribute:
Note: This feature inserts HTML into the DOM. By default, it is sanitized using our built-in sanitizer.
Mustard Ketchup Relish Mayonnaise
<select class="selectpicker">
<option data-content="<span class='badge badge-success'>Relish</span>">Relish</option>
</select>
Subtext
Add subtext to an option or optgroup with the data-subtext
attribute:
Mustard Ketchup Relish Mayonnaise Barbecue Sauce Salad Dressing Tabasco Salsa
Mustard Ketchup Relish Mayonnaise Barbecue Sauce Salad Dressing Tabasco Salsa With showSubtext
set to true.
<select class="selectpicker" data-size="5">
<option data-subtext="Heinz">Ketchup</option>
</select>
Customize menu
Menu size
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.
Mustard Ketchup Relish Mayonnaise Barbecue Sauce Salad Dressing Tabasco Salsa Mustard Ketchup Relish Mayonnaise Barbecue Sauce Salad Dressing Tabasco Salsa Mustard Ketchup Relish Mayonnaise Barbecue Sauce Salad Dressing Tabasco Salsa
Specify a number for data-size
to choose the maximum number of items to show in the menu.
Mustard Ketchup Relish Mayonnaise Barbecue Sauce Salad Dressing Tabasco Salsa
<select class="selectpicker" data-size="5">
...
</select>
Select/deselect all options
Adds two buttons to the top of the menu - Select All & Deselect All with data-actions-box="true"
.
Mustard Ketchup Relish
<select class="selectpicker" multiple data-actions-box="true">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
Divider
Add data-divider="true"
to an option to turn it into a divider.
Mustard Ketchup Relish Mayonnaise Barbecue Sauce Salad Dressing Tabasco Salsa
<select class="selectpicker" data-size="5">
<option data-divider="true"></option>
</select>
Menu header
Add a header to the dropdown menu, e.g. header: 'Select a condiment'
or data-header="Select a condiment"
Mustard Ketchup Relish Mayonnaise Barbecue Sauce Salad Dressing Tabasco Salsa
<select class="selectpicker" data-header="Select a condiment">
...
</select>
Container
Append the select menu to a specific element, e.g. container: 'body'
or data-container=".main-content"
. This is useful if the select element is inside an element with overflow: hidden
.
container: false
Mustard Ketchup Relish Mayonnaise Barbecue Sauce Salad Dressing Tabasco Salsa
container: 'body'
Mustard Ketchup Relish Mayonnaise Barbecue Sauce Salad Dressing Tabasco Salsa
<div style="overflow:hidden;">
<select class="selectpicker">
...
</select>
<select class="selectpicker" data-container="body">
...
</select>
</div>
Dropup menu
dropupAuto
is set to true by default, which automatically determines whether or not the menu should display above or below the select box. If dropupAuto
is set to false, manually make the select a dropup menu by adding the .dropup
class to the select.
Mustard Ketchup Relish
<select class="selectpicker dropup" data-dropup-auto="false">
...
</select>
Disabled
Disabled select box
Mustard Ketchup Relish
<select class="selectpicker" disabled>
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
Disabled options
Mustard Ketchup Relish
<select class="selectpicker">
<option>Mustard</option>
<option disabled>Ketchup</option>
<option>Relish</option>
</select>
Disabled option groups
Mustard Ketchup Relish Tent Flashlight Toilet Paper
<select class="selectpicker test">
<optgroup label="Picnic" disabled>
<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>