Select Menus in Bootstrap 5

Bootstrap Select

The "Select menus" that can be used to create stylish select dropdowns.

As an example:

Editor

Loading...

In the example above:

• The .form-floating class is used to create a floating label effect for the select menu.
• The <label> element is placed after the <select> element, and the for attribute of the label matches the id of the select menu, ensuring proper label association.
• The .form-select class is applied to the <select> element to style it as a Bootstrap select menu.
• The aria-label attribute provides an accessible label for screen readers.

Select Menu Size

You can control the size of a select menu using the .form-select class along with the .form-select-sm class for a smaller size or the .form-select-lg class for a larger size.

As an example:

Editor

Loading...

In the example above:

• The .form-select-sm class is added to the <select> element to create a smaller size select menu.
• If you want a larger size, you can use the .form-select-lg class instead.
• If you don't add either of these size-specific classes, the select menu will have the default size.

Disabled Select Menu

To create a disabled select menu in Bootstrap 5, you can add the disabled attribute to the <select> element.

As an example:

<div class="form-floating">
     <select
          class="form-select"
          id="exampleSelect"
          aria-label="Select Example"
          disabled
     >
          <option selected>Select an option</option>
          <option value="option1">Option 1</option>
          <option value="option2">Option 2</option>
          <option value="option3">Option 3</option>
     </select>
     <label for="exampleSelect">Select Example</label>
</div>

In the example above:

• The disabled attribute is added to the <select> element to disable the select menu.
• This prevents the user from interacting with it or selecting any options.