Google Ad Slot: content-top

Bootstrap 5 Select Menus

~1 min read · Bootstrap

On this page

In Bootstrap 5, you can use the form-select class to style HTML <select> elements. The form-select class provides a clean and modern design for dropdown menus, with various customization options.

Basic Select Menu:

Add the form-select class to a <select> element to create a styled dropdown.

Example Select

Example

Example Select

Try it yourself

Disabled Select Menu:

To make the entire select menu disabled, add the disabled attribute.

Example Select

Example

Example Select

Try it yourself

Sizing Options:

You can control the size of the select menu with the following classes:

Class	Description
form-select-lg	Large select menu.
form-select	Default size.
form-select-sm	Small select menu.

Example

Try it yourself

Multiple Select Menu:

To allow multiple selections, add the multiple attribute.

Example

Try it yourself

Customizing with Validation:

Bootstrap supports validation styles for select menus:

Class	Description
is-valid	Adds a green border for valid.
is-valid	Adds a red border for invalid.

Looks good!

Please select a valid option.

Example

Looks good!

Please select a valid option.

Try it yourself

❮ Previous Next ❯

Formatter

Design

Editor

Generator

Converter

Tester

Search

Welcome Back

Create Account

Forgot Password

Bootstrap 5 Select Menus

Basic Select Menu:

Disabled Select Menu:

Sizing Options:

Class

Description

Multiple Select Menu:

Customizing with Validation:

Class

Description

Cookie Consent & Privacy Preferences