Bootstrap 5 Input group Custom Select

Last Updated : 06 Aug, 2024

Bootstrap 5 Input Groups are used to extend form controls by adding the buttons, text, or button groups before or after the text inputs, custom selects, or file inputs.

Bootstrap 5 Input group Custom select Classes: There is no specific class used to input group custom select. We use combinations of input-group classes with <select> tag and <option> tag within as needed.

Syntax:

<div class="input-group ...">
 <label class="input-group-text" for="">...</label>
 <select class="form-select" id="">
 <option selected>....</option>
 <option value="1">....</option>
 <option value="2">....</option>
 ...
 </select>
</div>

Example 1: This example illustrates how to custom-select elements from the options menu on the downside of the text input.

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href= "https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"> <script src= "https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js">  </script> <script src= "https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js">  </script> </head> <body> <div class="container text-center "> <div class="mt-1"> <h1 class="text-success">GeeksforGeeks</h1> <h5>Bootstrap 5 Input group Custom select</h5> </div> <div class="input-group p-3"> <label class="input-group-text text-bg-success" for="inputGroupSelect01">Select</label> <select class="form-select" id="inputGroupSelect01"> <option selected>Select the Course</option> <option value="1">Btech</option> <option value="2">MBBS</option> <option value="3">MBA</option> <option value="4">BSC</option> </select> </div> <div class="input-group p-3"> <select class="form-select" id="inputGroupSelect01"> <option selected>Select a Car</option> <option value="1">Audi</option> <option value="2">Alto 800</option> <option value="3">Swift</option> <option value="4">Xuv-700</option> </select> <label class="input-group-text text-bg-success" for="inputGroupSelect01"> Select </label> </div> </div> </body> </html>

Output:

Example 2: In this example, illustrates how to custom-select elements from the options menu and adding a button on the left of the text input.

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href= "https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"> <script src= "https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js">  </script> <script src= "https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js">  </script> </head> <body> <div class="container text-center "> <div class="mt-1"> <h1 class="text-success">GeeksforGeeks</h1> <h5>Bootstrap 5 Input group Custom select</h5> </div> <div class="input-group p-3"> <button class="btn btn-success"> Button </button> <select class="form-select" id="inputGroupSelect02"> <option selected>Choose a Color</option> <option value="1">Red</option> <option value="2">yellow</option> <option value="3">Pink</option> <option value="4">Green</option> </select> </div> <div class="input-group p-3"> <select class="form-select" id="inputGroupSelect02"> <option selected>Choose a City</option> <option value="1">Agra</option> <option value="2">Mathura</option> <option value="3">Kanpur</option> <option value="4">Lucknow</option> </select> <button class="btn btn-success"> Button </button> </div> </div> </body> </html>