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>