Bootstrap 5 Input group Multiple addons

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>

Output:

Reference: https://getbootstrap.com/docs/5.0/forms/input-group/#multiple-addons

Bootstrap 5 Input group Multiple addons

Explore