Better Select Demo (Bootstrap styles)

For more information, please visit the GitHub repository.

See the "vanilla" (non-Bootstrap-styled) demo.

Default

Option 1
  • Option 1
  • Option 2
  • Option 3
  • Option 4
  • Option 5
  • Option 6
  • Option 7
  • Option 8
  • Option 9
  • Option 10
  • Option 11
  • Option 12
  • Option 13
  • Option 14
  • Option 15
  • Option 16
  • Option 17
  • Option 18
  • Option 19
  • Option 20

With Label

Option 1
  • Option 1
  • Option 2
  • Option 3
  • Option 4
  • Option 5

Disabled select

Option 1
  • Option 1
  • Option 2
  • Option 3
  • Option 4
  • Option 5

With Floating labels

Option 1
  • Option 1
  • Option 2
  • Option 3
  • Option 4
  • Option 5

With Floating labels and initial placeholder

Select an option
  • Select an option
  • Option 1
  • Option 2
  • Option 3
  • Option 4
  • Option 5

With custom styles

Option 1
  • Option 1
  • Option 2
  • Option 3
  • Option 4
  • Option 5

With placeholder attribute

Please select an option
  • Option 1
  • Option 2
  • Option 3
  • Option 4
  • Option 5

With fixed placeholder

Please select an option
  • Option 1
  • Option 2
  • Option 3
  • Option 4
  • Option 5

Bootstrap elements for comparison

Default dropdown

Default select

Default floating select

Form with better select

This form is using novalidate attribute to disable browser validation. Instead, we're setting the was-validated Bootstrap class to style the form validation status.

Select an option
  • Option 1
  • Option 2
  • Option 3
  • Option 4
  • Option 5
Placeholder
  • Option 1
  • Option 2
  • Option 3
  • Option 4
  • Option 5
  • Option 6
  • Option 7
  • Option 8
  • Option 9
  • Option 10