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

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>