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.

HTML

<!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.

HTML

<!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> 