Bootstrap 5 Select
Bootstrap 5 Select form is used to create customized select elements with custom CSS that changes the element’s initial appearance.
Bootstrap 5 Select Options:
- Default: It is used to create a default list of options from which a single option can be selected. To create a select option, we use <select> and <option> elements with the .form-select class.
- Sizing: It is used to create a list of options in small and large sizes of select elements.
- Disabled: It is used to create a disabled list of options in select elements.
Example 1: In this example, we will create default and disable select elements.
HTML
<!DOCTYPE html> < html > < head > < title >Bootstrap 5 Select</ title > < link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" > < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity = "sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin = "anonymous" > </ script > </ head > < body > < div class = "container text-center" > < h1 class = "text-success" > w3wiki </ h1 > < h2 >Bootstrap 5 Select</ h2 > < h3 >Default Select Option</ h3 > < select class = "form-select" aria-label = "GFG Select" > < option >Select an Option</ option > < option value = "GFG1" >HTML</ option > < option value = "GFG2" >CSS</ option > < option value = "GFG3" >JavaScript</ option > < option value = "GFG4" selected>Bootstrap</ option > </ select > < br >< br > < h3 >Disabled Select Option</ h3 > < select class = "form-select" aria-label = "GFG Disabled Select" disabled> < option >Select an Option</ option > < option value = "GFG1" >HTML</ option > < option value = "GFG2" >CSS</ option > < option value = "GFG3" >JavaScript</ option > < option value = "GFG4" selected>Bootstrap</ option > </ select > </ div > </ body > </ html > |
Output:
Example 2: In this example, we will create small and large sizes of select elements.
HTML
<!DOCTYPE html> < html > < head > < title >Bootstrap 5 Select</ title > < link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" > < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity = "sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin = "anonymous" > </ script > </ head > < body > < div class = "container text-center" > < h1 class = "text-success" > w3wiki </ h1 > < h2 >Bootstrap 5 Select</ h2 > < h3 >Small Select Option</ h3 > < select class = "form-select form-select-sm" aria-label = "GFG Small Select" > < option >Select an Option</ option > < option value = "GFG1" >HTML</ option > < option value = "GFG2" >CSS</ option > < option value = "GFG3" >JavaScript</ option > < option value = "GFG4" >Bootstrap</ option > </ select > < br >< br > < h3 >Large Select Option</ h3 > < select class = "form-select form-select-lg" aria-label = "GFG Large Select" > < option >Select an Option</ option > < option value = "GFG1" >HTML</ option > < option value = "GFG2" >CSS</ option > < option value = "GFG3" >JavaScript</ option > < option value = "GFG4" selected>Bootstrap</ option > </ select > </ div > </ body > </ html > |
Output:
Reference: https://getbootstrap.com/docs/5.0/forms/select/