Select

Basic Example #

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">
    <option selected="">Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

Sizing #

Set heights using classes like .form-control-lg and .form-control-sm .

<select class="form-select form-select-lg">
    <option selected="">Large</option></select
><select class="form-select mt-3">
    <option selected="">Normal</option></select
><select class="form-select mt-3 form-select-sm">
    <option selected="">Small</option>
</select>

States #

A select can be in several different states. Below you can see a demo of these states:

<select class="form-select">
    <option selected="">Normal</option></select
><select class="form-select mt-3" disabled="">
    <option selected="">Disabled</option></select
><select class="form-select mt-3 is-valid">
    <option selected="">Valid</option></select
><select class="form-select mt-3 is-invalid">
    <option selected="">Invalid</option>
</select>