Advertisement
Google Ad Slot: content-top
Bootstrap 5 Select Menus
In Bootstrap 5, you can use the form-select class to style HTML <select> elements. The form-select class provides a clean and modern design for dropdown menus, with various customization options.
Basic Select Menu:
Add the form-select class to a <select> element to create a styled dropdown.
Example
<div class="mb-3">
<label for="exampleSelect" class="form-label">Example Select</label>
<select class="form-select" id="exampleSelect">
<option selected>Open this select menu</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
Disabled Select Menu:
To make the entire select menu disabled, add the disabled attribute.
Example
<div class="mb-3">
<label for="exampleSelect" class="form-label">Example Select</label>
<select class="form-select" disabled>
<option selected>Disabled select menu</option>
<option value="1">Option 1</option>
</select>
</div>
Sizing Options:
You can control the size of the select menu with the following classes:
Class |
Description |
|---|---|
form-select-lg |
Large select menu. |
form-select |
Default size. |
form-select-sm |
Small select menu. |
Example
<div class="mb-3">
<select class="form-select form-select-lg">
<option selected>Large select menu</option>
<option value="1">Option 1</option>
</select>
</div>
<div class="mb-3">
<select class="form-select">
<option selected>Default select menu</option>
<option value="1">Option 1</option>
</select>
</div>
<div class="mb-3">
<select class="form-select form-select-sm">
<option selected>Small select menu</option>
<option value="1">Option 1</option>
</select>
</div>
Multiple Select Menu:
To allow multiple selections, add the multiple attribute.
Example
<select class="form-select" multiple>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
<option value="7">Option 7</option>
<option value="8">Option 8</option>
</select>
Customizing with Validation:
Bootstrap supports validation styles for select menus:
Class |
Description |
|---|---|
is-valid |
Adds a green border for valid. |
is-valid |
Adds a red border for invalid. |
Looks good!
Please select a valid option.
Example
<div class="mb-3">
<select class="form-select is-valid">
<option selected>Valid option</option>
<option value="1">Option 1</option>
</select>
<div class="valid-feedback">Looks good!</div>
</div>
<div class="mb-3">
<select class="form-select is-invalid">
<option selected>Invalid option</option>
<option value="1">Option 1</option>
</select>
<div class="invalid-feedback">Please select a valid option.</div>
</div>