Bootstrap Select

flag German flag Spanish flag French flag English

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: #1abc9c; 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="custom-styling 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>

© 2021 DesignReset

Coded with

admin-profile
Alan Green

Lead Developer

My Profile

Inbox
Todo

11 New Task
Messages
Andy King

Work is delayed
Alma Clark

It was a bit dramatic.
Vincent

Coffee?
Iris Hofman

Not comming to office today.
Linda Nelson

Uploaded files to server.
New Invoice

#002658 is generated for Laurie Fox

#0036489 is generated for Ernest Reeves

#014778 is generated for Sean Freeman

#0165987 is generated for Nia Hillyer

#0265998 is generated for Dale Butler

Task Board

Launch New Seo Wordpress Theme has been moved to Completed Board by Alma Clark

New Task is added by Ernest Reeves

Dinner with Kelly Young has been moved to Completed Board by Dale Butler

Event Notifications
View All Mark as Read

New Event has been added on 15 Dec 2020

Collect documents from Kelly at the restaurant tommorrow.

Meeting Event on 12 Nov has been updated to 8 PM

New Event Seminar organised by Design Reset will be held on 25 January

Today's Conference is Cancelled.

Meeting with Project Lead on 01 Jan has been updated to 15 Jan