Hit enter after type your search item

Bootstrap 5 Select: 5 Examples

Bootstrap 5 Select Form Control

  • The select is an HTML element to get the user input in the form of a dropdown list.
  • Most often, the select is used in HTML forms.
  • Bootstrap 5 provides built-in classes to design/style the HTML select form control
  • This tutorial provides how to use those classes along with various styles

An example of Bootstrap 5 Select

You only need to refer the Bootstrap 5 .form-select class to the HTML select element and BS will style the initial appearance of the select dropdown.

Note, it does not change how list items (options) are displayed. This behavior is due to browser limitations.

Have a look at a simple select control with five options:

BS 5 Code:



An example of a disabled select dropdown

You just need to add the disabled HTML attribute to the form control to disable it. It does two things:

  • It gives select a grayed-out look.
  • It also removes pointer events.

See the example below of a disabled select control:



As you run the above code, a user won’t be able to click on the select to see its list/options.

Sizing of the select control example

You may also manage the size of select control by using size-specific classes provided by BS 5.

Following classes can be used for small and large select controls.

  • form-select-sm (For small size)
  • form-select-lg (For large size)

The following example shows all three types i.e. Normal (as we have seen in the above examples), small, and large:


BS 5 code:

Using multiple attribute of the HTML select example

Need to allow users to select multiple options? BS 5 also supports multiple attribute. Just add multiple to the select tag and you are done. Have a look:




Styling the select control

You may apply custom CSS to style the select control. In the following example, we have created a CSS class and referred it to the select control.




You may style your own CSS and apply it to form along with select control.

This div height required for enabling the sticky sidebar