Open In App

Bootstrap 5 Select

Improve
Improve
Like Article
Like
Save
Share
Report

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>
        rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
        crossorigin="anonymous">
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous">
    </script>
</head>
  
<body>
    <div class="container text-center">
        <h1 class="text-success">
            GeeksforGeeks
        </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>
        rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
        crossorigin="anonymous">
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous">
    </script>
</head>
  
<body>
    <div class="container text-center">
        <h1 class="text-success">
            GeeksforGeeks
        </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/



Last Updated : 21 Nov, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads