#### Bootstrap Select

Basic Select

Use `.form-control` class for basic select control.

Custom Select

Use `.custom-select` class for Custom Select control.

Multiple Select

Use `multiple` attribute for Multiple select control.

Disabled Select

Use `disabled` attribute for disabled select control.

#### Select2

For more information
Basic Select2

Use `.select2` class for basic select2 control.

Single Select with Label

Use `optgroup` attribute for basic select2 with Label control.

Select With Icon

Use data attribute `data-icon` to add icon name for each options. And use class `.select2-icons` to set icon with option.

Template support

Select2 supports custom themes using the theme option so you can style Select2 to match the rest of your application. These are using the `classic` theme, which matches the old look of Select2.

#### Multiple Select2

Basic Multiple Select2

Use `.select2` class for basic select2 control. Use `multiple="multiple"` attribute for multiple select box.

Multiple Select with Label

Use `optgroup` attribute for multiple select box with Label control.

Select With Icon

Use data attribute `data-icon` to add icon name for each options. And use class `.select2-icons` to set icon with option.

Maximum Select with Label

Select2 multi-value select boxes can set restrictions regarding the maximum number of options selected. The select below is declared with the `multiple` attribute with `maximumSelectionLength` in the select2 options.

#### Advance Options

Loading Array Data

Select2 provides a way to load the data from a local array. You can provide initial selections with array data by providing the option tag for the selected values, similar to how it would be done for a standard select.

Loading Remote Data

Select2 comes with AJAX support built in, using jQuery's AJAX methods. In this example, we can search for repositories using GitHub's API.

Customizing How Results Are Matched

Unlike other dropdowns on this page, this one matches options only if the term appears in the beginning of the string as opposed to anywhere: This custom matcher uses a compatibility module that is only bundled in the full version of Select2. You also have the option of using a more complex matcher.

Programmatic access

Select2 supports methods that allow programmatic control of the component.

#### Size

For different sizes of select2, Use classes like `.select2-size-sm` & `.select2-size-lg` for Large, small & Extra Small Select respectively.

Large
Default
Small

#### Multi Select Size

For different sizes of select2, Use classes like `.select2-size-sm` & `.select2-size-lg` for Large, small & Extra Small Select respectively.

Large
Default
Small

#### Color

Background Color

Use class `.select2-bg` with `data-bgcolor` & `data-bgcolor-variation` attributes for background color of control.

Full Background Color

Use class `.select2-full-bg` with `data-bgcolor` & `data-bgcolor-variation` attributes for full select2 control background color.

Border Color

Use class `.select2-border` with `data-border-color` & `data-border-variation` attributes class for Border color of control.

#### Color for Multi Select

Background Color

Use class `.select2-bg` with `data-bgcolor` & `data-bgcolor-variation` attributes for background color of control.

Full Background Color

Use class `.select2-full-bg` with `data-bgcolor` & `data-bgcolor-variation` attributes for full select2 control background color.

Border Color

Use class `.select2-border` with `data-border-color` & `data-border-variation` attributes class for Border color of control.