Bootstrap 5 Input Group Multiple Inputs

Last Updated : 15 Dec, 2022

Bootstrap 5 Input Group Multiple Inputs help to take multiple inputs in an input group. Multiple inputs in an input group do not support validations.

Bootstrap 5 Input Group Multiple Inputs used Classes: There are no specific classes to create multiple inputs in input group. For creating the input group, we use .input-group class.

Syntax:

<div class="input-group">
    <span class='input-group-text'> Text... </span>
    <input type="text" class="form-control">
    <input type="text" class="form-control">  
</div>

Example 1: In this example, we will learn about a basic example of Bootstrap 5 Input group Multiple inputs.

<!DOCTYPE html>
<html>

<head>
    <title>Input group Multiple inputs</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">
</head>

<body>
    <div class="container text-center">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>

        <h2>
            Bootstrap 5 Input group Multiple inputs
        </h2>
        
        <div class="input-group ">
            <input type="text" class="form-control" 
                placeholder="Multiple Input in Input Group">
            <input type="text" class="form-control" 
                placeholder="Multiple Input in Input Group">
            <input type="text" class="form-control" 
                placeholder="Multiple Input in Input Group">
            <input type="text" class="form-control" 
                placeholder="Multiple Input in Input Group">
        </div>
    </div>
</body>

</html>

Output:

Example 2: In this example, we will add texts and a button with Bootstrap 5 multiple inputs in an input group.

<!DOCTYPE html>
<html>

<head>
    <title>Input group Multiple inputs</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">
</head>

<body>
    <div class="container text-center">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
        <h2>
            Bootstrap 5 Input group Multiple inputs
        </h2>
        <div class="input-group ">
            <span class="input-group-text">
                Hi Geek!!
            </span>
            
            <input type="text" class="form-control" 
                placeholder="Multiple Input">
            <input type="text" class="form-control" 
                placeholder="Multiple Input">
            <input type="text" class="form-control" 
                placeholder="Multiple Input">
            <input type="text" class="form-control" 
                placeholder="Multiple Input">

            <button class="btn btn-success">
                GeeksforGeeks Button
            </button>
        </div>
    </div>
</body>

</html>