YouTip

Bootstrap5 Form Select

📅 2026-06-23 | 📂 Bootstrap

# Bootstrap 5 Form Select In Bootstrap 5, you can customize the default browser `` element, add the `.form-select` class. This class resets the default browser appearance, adds a custom arrow indicator, and applies consistent padding, borders, and focus states. ### Example: Single-Select Dropdown ```html

Select an option:

``` ### Example: Multi-Select Dropdown To allow users to select multiple options, add the `multiple` attribute to the `

``` --- ## Sizing You can easily change the size of your select menus to match other form controls. Use `.form-select-lg` for larger select menus and `.form-select-sm` for smaller ones. ### Example: Sizing Options ```html ``` --- ## Disabled State Add the `disabled` boolean attribute to a ` ``` --- ## Datalists (Auto-suggest Dropdown) If you want to provide a list of recommended options while still allowing users to type a custom value, you can use the HTML5 `` element combined with a standard `` element. In Bootstrap 5, apply the `.form-control` class to the `` element to style it, and link it to the `` using the `list` attribute. ### Example: Datalist ```html

Choose your favorite website: