Bootstrap 5 Input group Multiple addons

Last Updated : 07 Dec, 2022

Bootstrap 5 Input group Multiple addons help to add multiple items in an input group which may include text, button, input, checkbox, radio, etc.

Bootstrap 5 Input group Multiple addons Classes

input-group: This class is used to create an input group
input-group-text: This class is used to add text to an input group

Syntax:

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

Example 1: In this example, we will learn about Multiple addons.

HTML

<!DOCTYPE html> <html> <head> <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 col-6"> <h1 class="text-success"> GeeksforGeeks </h1> <h2> Bootstrap 5 Input group Multiple addons </h2> <div class="input-group mb-3 "> <span class="input-group-text bg-success text-white"> GeeksforGeeks </span> <input type="text" class="form-control " placeholder="is a Computer Science "> <span class="input-group-text bg-warning text-white"> portal </span> </div> </div> </body> </html>

Output:

Example 2: In this example, we will learn to Use checkboxes and text as multiple addons.

HTML

<!DOCTYPE html> <html> <head> <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 col-6"> <h1 class="text-success"> GeeksforGeeks </h1> <h2>Bootstrap 5 Input group Multiple addons</h2> <div class="input-group mb-3 "> <span class="input-group-text bg-success text-white"> Choose course from GeeksforGeeks </span> <div class="form-check m-2"> <input class="form-check-input" type="checkbox"> <label class="form-check-label"> Checkbox 1 </label> </div> <div class="form-check m-2"> <input class="form-check-input" type="checkbox"> <label class="form-check-label"> Checkbox 2 </label> </div> </div> </div> </body> </html>