Select
Customize the native selects with custom CSS that changes the elementโs initial appearance.
Select on BootstrapDefault
Custom select
menus need only a custom class, .form-select
to trigger the custom styles. Custom styles are limited to the select
's initial appearance and cannot modify the option
s due to browser limitations.
<select class="form-select" aria-label="Default select example">
<option selected="">Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
Sizing
You may also choose from small and large custom selects to match our similarly sized text inputs.
<select class="form-select form-select-lg mb-3" aria-label=".form-select-lg example">
<option selected="">Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select class="form-select form-select-sm" aria-label=".form-select-sm example">
<option selected="">Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>