Bootstrap 5 Select
Select
Customize the native<select>s with custom CSS that changes the element’s initial appearance.
🤖 Looking for the LLM-optimized version?View llm.md
Other frameworks
CoreUI components are available as native Angular, React, and Vue components. To learn more please visit the following pages.
Default
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.
<selectclass="form-select"aria-label="Default select example"><optionselected>Open this select menu</option><optionvalue="1">One</option><optionvalue="2">Two</option><optionvalue="3">Three</option></select>Sizing
You may also choose from small and large custom selects to match our similarly sized text inputs.
<selectclass="form-select form-select-lg mb-3"aria-label=".form-select-lg example"><optionselected>Open this select menu</option><optionvalue="1">One</option><optionvalue="2">Two</option><optionvalue="3">Three</option></select><selectclass="form-select form-select-sm"aria-label=".form-select-sm example"><optionselected>Open this select menu</option><optionvalue="1">One</option><optionvalue="2">Two</option><optionvalue="3">Three</option></select>Themultiple attribute is also supported:
<selectclass="form-select"multiplearia-label="multiple select example"><optionselected>Open this select menu</option><optionvalue="1">One</option><optionvalue="2">Two</option><optionvalue="3">Three</option></select>As is thesize attribute:
<selectclass="form-select"size="3"aria-label="size 3 select example"><optionselected>Open this select menu</option><optionvalue="1">One</option><optionvalue="2">Two</option><optionvalue="3">Three</option></select>Disabled
Add thedisabled boolean attribute on a select to give it a grayed out appearance and remove pointer events.
<selectclass="form-select"aria-label="Disabled select example"disabled><optionselected>Open this select menu</option><optionvalue="1">One</option><optionvalue="2">Two</option><optionvalue="3">Three</option></select>Customizing
SASS variables
$form-select-padding-y:$input-padding-y;$form-select-padding-x:$input-padding-x;$form-select-font-family:$input-font-family;$form-select-font-size:$input-font-size;$form-select-indicator-padding:$form-select-padding-x*3;// Extra padding for background-image$form-select-font-weight:$input-font-weight;$form-select-line-height:$input-line-height;$form-select-color:$input-color;$form-select-bg:$input-bg;$form-select-disabled-color:null;$form-select-disabled-bg:$input-disabled-bg;$form-select-disabled-border-color:$input-disabled-border-color;$form-select-bg-position:right$form-select-padding-xcenter;$form-select-bg-size:16px12px;// In pixels because image dimensions$form-select-indicator-color:$gray-800;$form-select-indicator:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>");$form-select-feedback-icon-padding-end:$form-select-padding-x*2.5+$form-select-indicator-padding;$form-select-feedback-icon-position:centerright$form-select-indicator-padding;$form-select-feedback-icon-size:$input-height-inner-half$input-height-inner-half;$form-select-border-width:$input-border-width;$form-select-border-color:$input-border-color;$form-select-border-radius:$input-border-radius;$form-select-box-shadow:var(--#{$prefix}box-shadow-inset);$form-select-focus-border-color:$input-focus-border-color;$form-select-focus-width:$input-focus-width;$form-select-focus-box-shadow:000$form-select-focus-width$input-btn-focus-color;$form-select-padding-y-sm:$input-padding-y-sm;$form-select-padding-x-sm:$input-padding-x-sm;$form-select-font-size-sm:$input-font-size-sm;$form-select-border-radius-sm:$input-border-radius-sm;$form-select-padding-y-lg:$input-padding-y-lg;$form-select-padding-x-lg:$input-padding-x-lg;$form-select-font-size-lg:$input-font-size-lg;$form-select-border-radius-lg:$input-border-radius-lg;$form-select-transition:$input-transition;CoreUI vs Bootstrap
While this Form Select component is fully compatible with Bootstrap and follows its core principles, CoreUI delivers a more complete solution for modern app development.
What sets CoreUI apart from Bootstrap?
- ✅Fully compatible with Bootstrap – Built directly on Bootstrap, all classes and behaviors work as expected.
- 🧠Framework-native versions – CoreUI provides dedicated libraries forReact.js,Vue.js, andAngular, unlike Bootstrap which relies on third-party plugins for JavaScript frameworks.
- 👨💻Maintained by a full-time team – CoreUI is developed as a professional product, not a volunteer-driven project.
- 📦More built-in components – Includes additional ready-to-use components like range sliders, multi-selects, steppers, etc.
- 🛠️Sass Modules support today – CoreUI already supports Sass Modules, which are planned for Bootstrap 6.
- 🌍Better LTR/RTL support – Uses modern CSS logical properties for seamless bidirectional layout support.
- 🔒LTS (Long-Term Support) – Bootstrap now offers LTS only via paid third parties like HeroDevs, while CoreUI continues to offer long-term support natively and for free.
Whether you’re building internal tools, dashboards, or SaaS platforms — CoreUI combines the familiarity of Bootstrap with a more powerful, scalable, and production-ready ecosystem.
👉Explore CoreUI Bootstrap Components
👉Compare CoreUI vs Bootstrap