Bootstrap 5 select dropdowns let users choose from a list of options. This page covers 4 select patterns — basic, multiple, optgroups and validated — each ready to use in your forms.

Quick Setup

Select dropdowns need only Bootstrap 5 CSS:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"/>

Key Classes Reference

ClassWhat It Does
.form-selectRequired class for styled select
.form-select-smSmall size select
.form-select-lgLarge size select
multipleEnables multi-selection
size="5"Shows N visible options
disabledDisables the entire select
selectedPre-selects an option
.is-validGreen valid state
.is-invalidRed invalid state
<optgroup>Groups options with a label

1. Bootstrap 5 Basic Select

Standard select dropdown using form-select class in default, small and large sizes.

2. Bootstrap 5 Multiple Select

Allow multiple selections using the multiple attribute. Hold Ctrl/Cmd to select more than one option.

3. Bootstrap 5 Select with Optgroups

Organize select options into groups using optgroup element. Great for categorized dropdowns.

4. Bootstrap 5 Select in Forms with Validation

Select dropdowns with labels, helper text, disabled options and validation states.

Frequently Asked Questions

Use the value property: const selected = document.getElementById('mySelect').value. For multiple select get all selected options: const options = [...select.selectedOptions].map(o => o.value). Listen for changes with select.addEventListener('change', handler).
Add the selected attribute to the option: <option value='angular' selected>Angular</option>. For JavaScript: select.value = 'angular'. For multiple select, set selected on multiple options: option.selected = true.
Add disabled attribute to individual options: <option disabled>Option</option>. To disable the entire select add disabled to the select element itself. Disabled options appear grayed out and cannot be selected.
Bootstrap's form-select class handles the basic styling including the chevron arrow. To customize further override the CSS: .form-select { border-color: #fd4766; border-radius: 8px; }. The dropdown options themselves are styled by the browser and cannot be fully customized with CSS alone.
Bootstrap 5 doesn't include a searchable select. Use Tom Select or Select2 library for search functionality. Both integrate with Bootstrap's form-select class. Tom Select is more modern and works without jQuery unlike Select2.

Need a Full Bootstrap 5 Admin Dashboard?

Get a complete Angular 21 + Bootstrap 5 dashboard with 50+ components — built by the same team behind BootstrapPlanet.

Browse Templates →

Use code FIRST30 for 30% off your first purchase.

Related Components

Bootstrap 5 Form Validation

View examples →

Bootstrap 5 Contact Form

View examples →

Bootstrap 5 Login Form

View examples →