Standard select boxes
Use .selectpicker
class on select element to convert it to Bootstrap Select.
<select class="selectpicker"> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> </select>
Select boxes with optgroups
Add options inside the optgroups
to for group options
<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
Add multiselect
attribute to for multi-selection
<select class="selectpicker" multiple> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> </select>
Live search
You can add a search input by passing data-live-search="true"
attribute
<select class="selectpicker" data-live-search="true"> <option>Fries</option> <option>Burger, Shake and a Smile</option> <option>Sugar, Spice and all things nice</option> </select>
Keywords
Add key words to options to improve their searchability using data-tokens
.
<select class="selectpicker" data-live-search="true"> <option data-tokens="ketchup mustard">Hot Dog</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
.
<select class="selectpicker" multiple data-max-options="2"> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> </select>
Limit the number of selections in groups
Limit the number of group that can be selected using maxOptionsText
.
<select class="selectpicker" multiple> <optgroup label="Condiments" data-max-options="2"> <option>ustard^</option> <option>etchup^</option> <option>elish^</option> </optgroup> <optgroup label="Breads" data-max-options="2"> <option>lain^</option> <option>teamed^</option> <option>oasted^</option> </optgroup> </select>
Placeholder
Using the title
attribute will set the default placeholder.
<select class="selectpicker" multiple title="Choose options"> <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
<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
<select class="selectpicker" multiple data-selected-text-format="count"> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> </select>
Selected text format
count > x
: Where x is the number of items selected when the display format changes from values to count.
<select class="selectpicker" multiple data-selected-text-format="count > 3"> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> <option>Onions</option> </select>
Style individual options
Classes and styles added to options are transferred to the select box.
<select class="selectpicker"> <option>Mustard</option> <option class="bg-danger">Ketchup</option> <option style="background: #8dbf42; color: #fff;">Relish</option> </select>
Custom content
Insert custom HTML into the option with the data-content
attribute
<select class="selectpicker"> <option data-content="<span class='badge badge-primary'>Primary</span>">Primary</option> <option data-content="<span class='badge badge-secondary'>Secondary</span>">Secondary</option> <option data-content="<span class='badge badge-success'>Success</span>">Success</option> <option data-content="<span class='badge badge-warning'>Warning</span>">Warning</option> </select>
Show Subtext
Add subtext to an option or optgroup with the data-subtext
attribute.
<select class="selectpicker" data-show-subtext="true"> <option data-subtext="French's">Mustard</option> <option data-subtext="Heinz">Ketchup</option> <option data-subtext="Sweet">Relish</option> <option data-subtext="Miracle Whip">Mayonnaise</option> <option data-divider="true">divider</option> <option data-subtext="Honey">Barbecue Sauce</option> <option data-subtext="Ranch">Salad Dressing</option> <option data-subtext="Sweet & Spicy">Tabasco</option> <option data-subtext="Chunky">Salsa</option> </select>
Menu size
The size of the menu can also be specifed using the data-size
attribute.
<select class="selectpicker" data-size="5"> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> <option>Mayonnaise</option> <option>Barbecue Sauce</option> <option>Salad Dressing</option> <option>Tabasco</option> <option>Salsa</option> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> <option>Mayonnaise</option> <option>Barbecue Sauce</option> <option>Salad Dressing</option> <option>Tabasco</option> <option>Salsa</option> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> <option>Mayonnaise</option> <option>Barbecue Sauce</option> <option>Salad Dressing</option> <option>Tabasco</option> <option>Salsa</option> </select>
Select / Deselect all options
Adds two buttons to the top of the menu - Select All & Deselect All with data-actions-box="true"
<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.
<select class="selectpicker"> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> <option>Mayonnaise</option> <option>Barbecue Sauce</option> <option>Salad Dressing</option> <option>Tabasco</option> <option>Salsa</option> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> <option data-divider="true">divider</option> <option>Mayonnaise</option> <option>Barbecue Sauce</option> <option>Salad Dressing</option> <option>Tabasco</option> <option>Salsa</option> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> <option>Mayonnaise</option> <option>Barbecue Sauce</option> <option>Salad Dressing</option> <option>Tabasco</option> <option>Salsa</option> </select>
Menu header
Add a header to the dropdown menu data-header="Select a condiment"
<select class="selectpicker" data-header="Select a condiment" data-size="5"> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> <option>Mayonnaise</option> <option>Barbecue Sauce</option> <option>Salad Dressing</option> <option>Tabasco</option> <option>Salsa</option> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> <option>Mayonnaise</option> <option>Barbecue Sauce</option> <option>Salad Dressing</option> <option>Tabasco</option> <option>Salsa</option> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> <option>Mayonnaise</option> <option>Barbecue Sauce</option> <option>Salad Dressing</option> <option>Tabasco</option> <option>Salsa</option> </select>
Dropup menu
Add dropupAuto
to automatically change postion according to window.
<select class="selectpicker dropup"> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> <option>Mayonnaise</option> </select>
Disabled
Disabled select box
Disable Select box using disabled
attribute on select
element.
<select class="selectpicker" disabled> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> </select>
Disabled options
Disable Select Option using disabled
attribute on select option
element.
<select class="selectpicker"> <option>Mustard</option> <option disabled>Ketchup</option> <option>Relish</option> </select>
Disabled options groups
Disable Select Group using disabled
attribute on select optgroup
element
<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>
Styling
Styling
You can set the button classes via the data-style
attribute
<select class="selectpicker mb-4 ml-2" data-style="btn btn-outline-primary"> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> <option>Onions</option> </select>
Width
Grid
Wrap selects in grid columns, or any custom parent element, to easily enforce desired widths.
<div class="row"> <div class="col-sm-3 col-12"> <div class="form-group"> <select class="selectpicker form-control"> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> </select> </div> </div> <div class="col-sm-9 col-12"> <div class="form-group"> <select class="selectpicker form-control"> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> </select> </div> </div> </div>
Custom Width
use the data-width
attribute to set the width of the select
Data Width = "fit"
Data Width = "200px"
Data Width = "75%"
================== Data Width = "fit" ================== <div class="col-sm-12"> <select class="selectpicker mb-4" data-width="fit"> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> <option>Onions</option> </select> </div> ================== Data Width = "200px" ================== <div class="col-sm-12"> <select class="selectpicker mb-4" data-width="200px"> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> <option>Onions</option> </select> </div> ================== Data Width = "75%" ================== <div class="col-sm-12"> <select class="selectpicker mb-4" data-width="75%"> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> <option>Onions</option> </select> </div>
Copyright © 2021 DesignReset, All rights reserved.
Coded with