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>