Bootstrap Select Menus
A select menu (a dropdown list) lets people pick one option from a set, like a country or a plan. Bootstrap 5 styles the native <select> element with the .form-select class so it matches your other form controls without any JavaScript.
The .form-select class
Unlike text inputs, a <select> does not use .form-control. It has its own class, .form-select, which adds the custom arrow icon, padding, and rounded border. Each choice lives inside an <option> tag.
A single-choice dropdown
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<label for="role" class="form-label">Choose a role</label>
<select class="form-select" id="role">
<option selected>Open this menu</option>
<option value="dev">Developer</option>
<option value="design">Designer</option>
<option value="pm">Product Manager</option>
</select>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>The first <option> with the selected attribute acts as a placeholder that shows before the user picks anything. Give each real option a value attribute so your server knows what was chosen.
Sizing select menus
Just like text fields, selects support size classes: add .form-select-lg for a bigger menu or .form-select-sm for a compact one.
Large and small selects
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<select class="form-select form-select-lg mb-2">
<option selected>Large menu</option>
<option>Option one</option>
</select>
<select class="form-select form-select-sm">
<option selected>Small menu</option>
<option>Option one</option>
</select>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Multiple selection
Add the multiple attribute to let users choose several options at once. You can also set size to control how many rows are visible without scrolling.
Choose more than one
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<label for="skills" class="form-label">Pick your skills</label>
<select class="form-select" id="skills" multiple size="4">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="js">JavaScript</option>
<option value="react">React</option>
</select>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>- Use .form-select, not .form-control, for dropdowns.
- The first selected option makes a natural placeholder.
- Add multiple to allow selecting several values (hold Ctrl or Cmd).
- Size classes .form-select-lg and .form-select-sm change the height.
