Bootstrap - Bootstrap 5 Select Menu

Bootstrap 5 provides a modern, responsive, and customizable way to create select menus (dropdowns) using the .form-select class. It replaces the old .custom-select class from Bootstrap 4 and comes with improved styling, sizing, and better accessibility

1. Basic Bootstrap 5 Select Menu

The default select menu uses the .form-select class.

<div class="mb-3">
  <label for="city" class="form-label">Select Your City</label>
  <select class="form-select" id="city">
    <option selected>Choose a city</option>
    <option value="1">New York</option>
    <option value="2">London</option>
    <option value="3">Tokyo</option>
  </select>
</div>

Key Points:

.form-select → Applies Bootstrap’s styles.
selected → Sets the default selected option.
id + for → Improves accessibility.

2. Select Menu Sizes

Bootstrap 5 provides three sizes for select menus:

a) Default Size

<select class="form-select">
  <option selected>Default size</option>
  <option>Option 1</option>
  <option>Option 2</option>
</select>

b) Large Select

<select class="form-select form-select-lg">
  <option selected>Large select menu</option>
  <option>Option 1</option>
  <option>Option 2</option>
</select>

c) Small Select

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

3. Multiple Select Menu

If you want users to select multiple options, add the multiple attribute.

<label for="skills" class="form-label">Select Your Skills</label>
<select class="form-select" id="skills" multiple>
  <option>HTML</option>
  <option>CSS</option>
  <option>JavaScript</option>
  <option>React</option>
  <option>Bootstrap</option>
</select>

Tip: Hold Ctrl (Windows) or Cmd (Mac) to select multiple options.

4. Disabled Select Menus

a) Disabled Entire Select

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

b) Disable Specific Options

<select class="form-select">
  <option selected>Choose an option</option>
  <option value="1">Active Option</option>
  <option value="2" disabled>Disabled Option</option>
  <option value="3">Another Option</option>
</select>

5. Select Menus with Groups

Bootstrap supports grouping related options using <optgroup>.

<label for="car" class="form-label">Choose a Car Brand</label>
<select class="form-select" id="car">
  <optgroup label="German Cars">
    <option>BMW</option>
    <option>Audi</option>
    <option>Mercedes</option>
  </optgroup>
  <optgroup label="Japanese Cars">
    <option>Toyota</option>
    <option>Honda</option>
    <option>Nissan</option>
  </optgroup>
</select>

6. Floating Label Select Menus

Bootstrap 5’s floating labels also work with .form-select.

<div class="form-floating">
  <select class="form-select" id="floatingSelect">
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
  <label for="floatingSelect">Select an option</label>
</div>

7. Inline Select Menus

You can use select menus inside inline forms using .row or .d-flex.

<form class="row g-3 align-items-center">
  <div class="col-auto">
    <label for="gender" class="col-form-label">Gender</label>
  </div>
  <div class="col-auto">
    <select class="form-select" id="gender">
      <option selected>Choose...</option>
      <option>Male</option>
      <option>Female</option>
    </select>
  </div>
  <div class="col-auto">
    <button type="submit" class="btn btn-primary">Submit</button>
  </div>
</form>

8. Validation with Select Menus

Bootstrap 5 supports form validation with select menus.

<form class="needs-validation" novalidate>
  <div class="mb-3">
    <label for="country" class="form-label">Country</label>
    <select class="form-select" id="country" required>
      <option selected disabled value="">Choose...</option>
      <option>USA</option>
      <option>UK</option>
      <option>India</option>
    </select>
    <div class="invalid-feedback">
      Please select a valid country.
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit</button>
</form>

9. Full Example: All Select Menu Features

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap 5 Select Menus</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="p-4">

  <h3>Bootstrap 5 Select Menu Examples</h3>

  <!-- Basic Select -->
  <div class="mb-3">
    <label for="basicSelect" class="form-label">Basic Select</label>
    <select class="form-select" id="basicSelect">
      <option selected>Choose...</option>
      <option>Option 1</option>
      <option>Option 2</option>
    </select>
  </div>

  <!-- Sizes -->
  <div class="mb-3">
    <label class="form-label">Select Sizes</label>
    <select class="form-select form-select-lg mb-2">
      <option selected>Large Select</option>
      <option>Option 1</option>
    </select>
    <select class="form-select mb-2">
      <option selected>Default Select</option>
      <option>Option 1</option>
    </select>
    <select class="form-select form-select-sm">
      <option selected>Small Select</option>
      <option>Option 1</option>
    </select>
  </div>

  <!-- Multiple Select -->
  <div class="mb-3">
    <label for="multiSelect" class="form-label">Multiple Select</label>
    <select class="form-select" id="multiSelect" multiple>
      <option>HTML</option>
      <option>CSS</option>
      <option>JavaScript</option>
      <option>React</option>
    </select>
  </div>

  <!-- Floating Label Select -->
  <div class="form-floating mb-3">
    <select class="form-select" id="floatingSelect">
      <option selected>Open this select menu</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
    <label for="floatingSelect">Floating Label Select</label>
  </div>

  <!-- Validation -->
  <form class="needs-validation" novalidate>
    <div class="mb-3">
      <label for="validatedSelect" class="form-label">Validated Select</label>
      <select class="form-select" id="validatedSelect" required>
        <option selected disabled value="">Choose...</option>
        <option>USA</option>
        <option>India</option>
        <option>UK</option>
      </select>
      <div class="invalid-feedback">
        Please choose a valid option.
      </div>
    </div>
    <button class="btn btn-primary" type="submit">Submit</button>
  </form>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>