W3CoreUI

Bootstrap Select.

The jQuery plugin that brings select elements into the 21st century with intuitive multiselection, searching, and much more. Now with Bootstrap 5 support. Click here

Standard select boxes


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

Multiple select boxes


<select class="selectpicker form-select" 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 form-select" 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>

Button classes

You can set the button classes via the data-style attribute.


<select class="selectpicker form-select" data-style="btn-primary">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>
<select class="selectpicker form-select" data-style="btn-info">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>
<select class="selectpicker form-select" data-style="btn-success">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>
<select class="selectpicker form-select" data-style="btn-warning">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>
<select class="selectpicker form-select" data-style="btn-danger">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

Checkmark on selected option

You can also show the checkmark icon on standard select boxes with the show-tick class.


<select class="selectpicker form-select show-tick">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

Icons

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


<select class="selectpicker form-select show-tick">
	<option data-icon="fa fa-heart">Ketchup</option>
	<option data-icon="fa fa-film">Relish</option>
	<option data-icon="fa fa-home">Mayonnaise</option>
	<option data-icon="fa fa-print">Barbecue Sauce</option>
</select>

Custom content

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


<select class="selectpicker form-select">
  <option data-content="<span class='badge badge-sm light badge-primary'>Primary</span>">Primary</option>
  <option data-content="<span class='badge badge-sm light badge-success'>Success</span>">Success</option>
  <option data-content="<span class='badge badge-sm light badge-info'>Info</span>">Info</option>
  <option data-content="<span class='badge badge-sm light badge-danger'>Danger</span>">Danger</option>
  <option data-content="<span class='badge badge-sm light badge-warning'>Warning</span>">Warning</option>
</select>

<select class="selectpicker form-select">
  <option data-content="<img src='assets/images/country/england.svg' alt=''> England">England</option>
  <option data-content="<img src='assets/images/country/india.svg' alt=''> India">India</option>
  <option data-content="<img src='assets/images/country/uae.svg' alt=''> UAE">UAE</option>
</select>

Size


<select class="selectpicker form-select form-select-sm">
.....
</select>

<select class="selectpicker form-select">
.....
</select>

<select class="selectpicker form-select form-select-lg">
.....
</select>