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/[email protected]/dist/css/bootstrap.min.css" 
          rel="stylesheet">
    <script src=
"https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js">
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/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:

Bootstrap 5 Input group Custom Select

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/[email protected]/dist/css/bootstrap.min.css" 
          rel="stylesheet">
    <script src=
"https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js">
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/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>

Output:

Bootstrap 5 Input group Custom Select

Reference: https://getbootstrap.com/docs/5.0/forms/input-group/#custom-select

Bootstrap 5 Input group Sass

prashantrathore1159

Improve

Article Tags :

Bootstrap 5 Input group Custom Select

Similar Reads

Forms

Form controls

Form Select

Form Checks and radios

Form Range

Form Input group

Form Floating labels

Form Validation

Thank You!

What kind of Experience do you want to share?