Select

Customize the native `<select>`s with custom CSS that changes the element’s initial appearance.

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. 

<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.

Below are examples for all available sizes: extra-small, small, default, large, and extra-large. Use the corresponding utility class to change the control's height. 

<div class="d-block mb-3">
<label class="form-label">Extra small</label>
<select class="form-select form-select-xs mb-2" aria-label="Extra 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>

<label class="form-label">Small</label>
<select class="form-select form-select-sm mb-2" 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>

<label class="form-label">Default</label>
<select class="form-select mb-2" 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>

<label class="form-label">Large</label>
<select class="form-select form-select-lg mb-2" 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>

  <label class="form-label">Extra large</label>
  <select class="form-select form-select-xl" aria-label="Extra 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>

</div>

The multiple attribute is also supported:

<select class="form-select" multiple aria-label="Multiple 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>

As is the size attribute:

<select class="form-select" size="3" aria-label="Size 3 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>

Disabled

Add the disabled boolean attribute on a select to give it a grayed out appearance and remove pointer events. 

<select class="form-select" 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>

Option Groups

<select class="form-select" placeholder="Select time zone...">
<option value="">Select time zone...</option>
<optgroup label="Africa">
  <option value="WAT">West Africa Time (WAT) – UTC+1</option>
  <option value="CAT">Central Africa Time (CAT) – UTC+2</option>
  <option value="EAT">East Africa Time (EAT) – UTC+3</option>
</optgroup>

<optgroup label="Asia">
<option value="IST">Indian Standard Time (IST) – UTC+5:30</option>
<option value="CST">China Standard Time (CST) – UTC+8</option>
<option value="JST">Japan Standard Time (JST) – UTC+9</option>
<option value="AFT">Afghanistan Time (AFT) – UTC+4:30</option>
<option value="BST">Bangladesh Standard Time (BST) – UTC+6</option>
<option value="BTT">Bhutan Time (BTT) – UTC+6</option>
<option value="HKT">Hong Kong Time (HKT) – UTC+8</option>
<option value="SGT">Singapore Time (SGT) – UTC+8</option>
<option value="GST">Gulf Standard Time (GST) – UTC+4</option>
</optgroup>

<optgroup label="Europe">
<option value="WET">Western European Time (WET) – UTC+0</option>
<option value="CET">Central European Time (CET) – UTC+1</option>
<option value="EET">Eastern European Time (EET) – UTC+2</option>
<option value="MSK">Moscow Standard Time (MSK) – UTC+3</option>
</optgroup>

<optgroup label="North America">
<option value="EST">Eastern Standard Time (EST) – UTC−5</option>
<option value="CST">Central Standard Time (CST) – UTC−6</option>
<option value="MST">Mountain Standard Time (MST) – UTC−7</option>
<option value="PST">Pacific Standard Time (PST) – UTC−8</option>
</optgroup>

<optgroup label="South America">
<option value="ART">Argentina Time (ART) – UTC−3</option>
<option value="PET">Peru Time (PET) – UTC−5</option>
<option value="CLT">Chile Standard Time (CLT) – UTC−4</option>
</optgroup>

<optgroup label="Oceania">
<option value="AEST">Australian Eastern Standard Time (AEST) – UTC+10</option>
<option value="ACST">Australian Central Standard Time (ACST) – UTC+9:30</option>
<option value="AWST">Australian Western Standard Time (AWST) – UTC+8</option>
<option value="NZST">New Zealand Standard Time (NZST) – UTC+12</option>
</optgroup>

<optgroup label="Antarctica">
  <option value="Troll">Troll Station Time – UTC+2</option>
  <option value="Palmer">Palmer Station Time – UTC−3</option>
  <option value="McMurdo">McMurdo Station Time – UTC+12</option>
</optgroup>
</select>

Form Validation

The examples demonstrate required fields, how browser default messages behave, and how to apply Bootstrap's custom validation classes.

Browser defaults

The example below uses the native required attribute to show the default validation UI and behavior. 

<form>
<select id="select-person" class="form-select" required>
  <option value="" disabled selected>Select a person...</option>
  <option value="4">Thomas Edison</option>
  <option value="1">Nikola</option>
  <option value="3">Nikola Tesla</option>
  <option value="5">Arnold Schwarzenegger</option>
</select>

<div class="py-3">
  <button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>

Bootstrap

Bootstrap's validation styles (e.g., .was-validated and .invalid-feedback) can be utilized for form validation. The example demonstrates adding .was-validated to the form to display Bootstrap's custom validation feedback for the enhanced select.

Please select a person
<form id="bootstrap-form" novalidate>
<select class="form-select" id="select-bootstrap" required placeholder="Select a person..." name="beast">
  <option value="" disabled selected>Select a person...</option>
  <option value="4">Thomas Edison</option>
  <option value="1">Nikola</option>
  <option value="3">Nikola Tesla</option>
  <option value="5">Arnold Schwarzenegger</option>
</select>
<div class="invalid-feedback">
  Please select a person
</div>
<div class="py-3">
  <button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
document.addEventListener('DOMContentLoaded', function () {
// Example starter JavaScript for disabling form submissions if there are invalid fields
var form = document.getElementById('bootstrap-form')
form.addEventListener('submit', function (event){

  // add was-validated to display custom colors
  form.classList.add('was-validated')

  if (!form.checkValidity()) {
    event.preventDefault()
    event.stopPropagation()
  }

}, false)
});
On this page
Quick Links
Home Docs
Admin
Admin Dashboard Example
Themes
Website Example (Classic)
Website Example (Modern)
Dog Breeder 1 (Beagle)
Dog Breeder 2 (Golden Retriever)
Dog Breeder 3 (French Bulldog)
Dog Breeder 4 (Poodle)
Dog Breeder 5 (German Shepherd)
Dog Breeder 6 (Yorkshire Terrier)
Cat Breeder 1 (Persian)
Cat Breeder 2 (Siamese)
Cat Breeder 3 (Bengal)
Cat Breeder 4 (Abyssinian)
Cat Breeder 5 (Himalayan)
HOA 1
HOA 2
HOA 3
Real Estate 1
Real Estate 2
Other
AsteroBuilder
AsteroDigital
Paanstation
Jazzup Salon
HomeStyle Furnitech
MAK Holding Group
Takshila Institute
Clinic Demo