Bootstrap 5 – Select Menus: Style Dropdowns with .form-select

Introduction – What Are Select Menus in Bootstrap 5?

Select menus in Bootstrap 5 are dropdown fields used in forms to allow users to choose a single (or multiple) option(s) from a list. Unlike regular text inputs, these controls are ideal when input needs to be constrained to a set of predefined choices.

Bootstrap offers a dedicated .form-select class to style native <select> elements for better UX, accessibility, and consistency across devices.

In this guide, you’ll learn:

• How to create single and multiple select menus
• Customize select size and appearance
• Combine selects with form layouts and validation
• Enhance selects for mobile and accessibility

Example 1 – Basic Single Select

<label for="country" class="form-label">Country</label>
<select class="form-select" id="country">
  <option selected>Choose your country</option>
  <option value="us">United States</option>
  <option value="in">India</option>
  <option value="uk">United Kingdom</option>
</select>

Explanation:

Example 2 – Disabled Select Menu

<select class="form-select" disabled>
  <option>Disabled select menu</option>
</select>

• Prevents user interaction when input is not needed or allowed

Example 3 – Multiple Select Menu

<label for="fruits" class="form-label">Choose Fruits</label>
<select multiple class="form-select" id="fruits">
  <option>Apple</option>
  <option>Banana</option>
  <option>Mango</option>
</select>

• Allows users to select multiple options
• Hold Ctrl (Windows) or Cmd (Mac) to multi-select

Example 4 – Sizing the Select Menu

<select class="form-select form-select-lg mb-3">
  <option selected>Large select</option>
  <option>Option 1</option>
</select>

<select class="form-select form-select-sm">
  <option selected>Small select</option>
  <option>Option 1</option>
</select>

Example 5 – Select Menu with Validation

<form class="needs-validation" novalidate>
  <div class="mb-3">
    <label for="validationSelect" class="form-label">Choose Option</label>
    <select class="form-select" id="validationSelect" required>
      <option selected disabled value="">Select an item</option>
      <option>Item 1</option>
      <option>Item 2</option>
    </select>
    <div class="invalid-feedback">
      Please select an option.
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit</button>
</form>

<script>
  (() => {
    const forms = document.querySelectorAll('.needs-validation');
    forms.forEach(form => {
      form.addEventListener('submit', event => {
        if (!form.checkValidity()) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
  })();
</script>

• Leverages Bootstrap’s built-in validation classes
• Shows error feedback on submit if no valid selection is made

Best Practices for Select Menus

Summary – Dropdown Inputs for Flexible User Choice

Bootstrap 5 select menus give you elegant and responsive dropdowns to collect user choices easily. With utilities for size, validation, and layout integration, select elements can fit into almost any UI scenario.

Key Takeaways:

• Style dropdowns with .form-select
• Add multiple for multi-choice lists
• Control sizes with .form-select-sm / .form-select-lg
• Validate selects like other form controls using JS
• Match selects with appropriate <label> elements

Ideal for country lists, category pickers, forms, and filters.

FAQs – Bootstrap 5 Select Menus

Can I use form-control instead of form-select?
No. Use .form-control for <input>, and .form-select for <select> elements.

How do I add a default placeholder?
Add an <option selected disabled> with empty value as the first choice.

Are select menus accessible in Bootstrap?
Yes—when paired with proper labels and validation attributes.

Can I style the dropdown arrow in a Bootstrap select?
Not directly via Bootstrap; use custom select plugins or custom CSS.