Bootstrap Select

Standard select boxes

Use .selectpickerclass 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 optgroupsto 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 multiselectattribute 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 titleattribute 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 titleattribute 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-formatattribute 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-contentattribute 

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

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

<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 Allwith 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 dropupAutoto 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 disabledattribute on selectelement. 

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

Disabled options

Disable Select Option using disabledattribute on select optionelement. 

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

Disabled options groups

Disable Select Group using disabledattribute on select optgroupelement 

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

<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-widthattribute 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 © 2020 DesignReset,All Rights Reserved.

Coded with