Skip to main content

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.