Default Select
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 mb-4" id="form-select-01" name="form-select-01" 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>
<select class="form-select" id="form-select-02" name="form-select-02" aria-label="Disabled select example" disabled>
<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-4" id="form-select-03" name="form-select-03" aria-label="Large 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>
<select class="form-select form-select-sm" id="form-select-04" name="form-select-04" aria-label="Small 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>Select Plugins:
Single Select
Select your preferred programming language for development projects.
Option Groups
Choose a project management tool based on your team's workflow.
Default Multiple Select
Select multiple frontend frameworks you are familiar with.
Multiple Select With Close Icon
Select the database technologies you have worked with.
Multiple Select With Limit
Select up to 3 cloud platforms you have experience with.
Multiple Select With Option Groups
Select the development methodologies you are familiar with.
Text Inputs
Enter your favorite development tools, separated by commas.
Unique Values Only, No Pasting
Enter your skills, ensuring unique values only.
Email Address Only
Enter email addresses for team members, separated by commas.