Bootstrap 5 Input group Custom forms

Last Updated : 25 Jul, 2024

Bootstrap 5 Input group Custom forms are extended form controls, used to collect specific information from visitors on your website. Custom form limits are placed on the number of unique forms you have created. There are two types of custom forms as follows:

Custom select: The custom select menu is a dropdown menu that allows users to select or choose a particular option that is predefined.
Custom file input: Custom file input provides a button to its users that opens up a file that allows the user to choose a file.

Syntax:

<div class="input-group">
    <label class="input-group-text" for="gfg">
      ....
    </label>
    <input type="..." class="form-control" id="gfg">
</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/[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-secondary" 
                    for="inputGroupSelect01">
                Select
            </label>
            <select class="form-select" id="inputGroupSelect01">
                <option selected>Select the Sports</option>
                <option value="1">Cricket</option>
                <option value="2">football</option>
                <option value="3">Basketball</option>
                <option value="4">Badminton</option>
            </select>
        </div>
        <div class="input-group p-3">
            <select class="form-select" id="inputGroupSelect01">
                <option selected>Select a Book</option>
                <option value="1">Physics</option>
                <option value="2">Biology</option>
                <option value="3">Chemistry</option>
                <option value="4">Mathematics</option>
            </select>
            <label class="input-group-text text-bg-info" 
                for="inputGroupSelect01">
                Select
            </label>
        </div>
    </div>
</body>
</html>

Output:

Example 2: The below example demonstrates the Input group Custom file input by styling the label.

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/[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 file input</h5>
        </div>
        <div class="input-group mb-4">
            <label class="input-group-text text-bg-success" 
                for="input1">
                Option
            </label>
            <input type="file" class="form-control">
        </div>
        <div class="input-group mb-4">
            <input type="file" class="form-control">
            <button class="btn btn-primary">
                Option Button
            </button>
        </div>
    </div>
</body>

</html>

Output:

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

Bootstrap 5 Input group Custom file input

prashantrathore1159

Improve

Article Tags :

Bootstrap 5 Input group Custom forms

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?