Input group

<!-- Addon on the left -->
<div class="input-group mb-4">
  <span class="input-group-text">
    <i class="ci-lock"></i>
  </span>
  <input type="password" class="form-control" placeholder="Password">
</div>

<!-- Addon on the right -->
<div class="input-group mb-4">
  <input type="text" class="form-control" placeholder="Recipient's e-mail">
  <span class="input-group-text">@example.com</span>
</div>

<!-- Addons on both sides -->
<div class="input-group mb-3">
  <span class="input-group-text">$</span>
  <input type="text" class="form-control" placeholder="Amount">
  <span class="input-group-text">.00</span>
</div>

<!-- Multiple addons on left side -->
<div class="input-group mb-4">
  <span class="input-group-text">$</span>
  <span class="input-group-text">0.00</span>
  <input type="text" class="form-control" placeholder="Amount">
</div>

<!-- Multiple addons on right side -->
<div class="input-group mb-4">
  <input type="text" class="form-control" placeholder="Amount">
  <span class="input-group-text">$</span>
  <span class="input-group-text">0.00</span>
</div>

<!-- Multiple addons on both sides -->
<div class="input-group mb-4">
  <span class="input-group-text">
    <i class="ci-profile"></i>
  </span>
  <span class="input-group-text">
    <i class="ci-credit-card"></i>
  </span>
  <input type="text" class="form-control" placeholder="Amount">
  <span class="input-group-text">$</span>
  <span class="input-group-text">0.00</span>
</div>

<!-- Icon addon -->
<div class="input-group mb-4">
  <span class="input-group-text">
    <i class="ci-comment"></i>
  </span>
  <textarea class="form-control" placeholder="Type your message here..." rows="6"></textarea>
</div>

<!-- Textual addon -->
<div class="input-group mb-4">
  <span class="input-group-text text-heading">Options</span>
  <select class="form-select">
    <option>Choose one...</option>
    <option>One</option>
    <option>Two</option>
    <option>Three</option>
    <option>Four</option>
    <option>Five</option>
  </select>
</div>

<!-- Checkbox addon -->
<div class="input-group mb-4">
  <div class="input-group-text">
    <input class="form-check-input" type="checkbox">
  </div>
  <input class="form-control" type="text" placeholder="Checkbox here">
</div>

<!-- Radio button addon -->
<div class="input-group mb-3">
  <div class="input-group-text">
    <input class="form-check-input" type="radio" name="radio">
  </div>
  <input class="form-control" type="text" placeholder="Radio button here">
</div>

<!-- Multiple inputs (addon on the left) -->
<div class="input-group">
  <span class="input-group-text text-heading">First &amp; last name</span>
  <input class="form-control" type="text" placeholder="First name">
  <input class="form-control" type="text" placeholder="Last name">
</div>

<!-- Multiple inputs (addon on the right) -->
<div class="input-group">
  <input class="form-control" type="time" value="07:45">
  <input class="form-control" type="time" value="09:00">
  <span class="input-group-text">
    <i class="ci-clock"></i>
  </span>
</div>

<!-- Button addon on the left -->
<div class="input-group">
  <button class="btn btn-primary" type="button">Button</button>
  <input class="form-control" type="text" placeholder="Button on the left">
</div>

<!-- Button addon on the right -->
<div class="input-group">
  <input class="form-control" type="text" placeholder="Button on the right">
  <button class="btn btn-primary" type="button">Button</button>
</div>

<!-- Dropdown addon on the left -->
<div class="input-group">
  <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown">Dropdown</button>
  <div class="dropdown-menu my-1">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
  <input class="form-control" type="text" placeholder="Dropdown on the right">
</div>

<!-- Dropdown addon on the right -->
<div class="input-group">
  <input class="form-control" type="text" placeholder="Dropdown on the right">
  <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown">Dropdown</button>
  <div class="dropdown-menu dropdown-menu-end my-1">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

<!-- Multiple button addons -->
<div class="input-group">
  <input class="form-control" type="text" placeholder="Buttons on the right">
  <button class="btn btn-white border btn-icon" type="button">
    <i class="ci-plus-round"></i>
  </button>
  <button class="btn btn-white border btn-icon" type="button">
    <i class="ci-check text-success"></i>
  </button>
  <button class="btn btn-white border btn-icon" type="button">
    <i class="ci-close-round text-danger"></i>
  </button>
</div>

<!-- Input group large -->
<div class="input-group input-group-lg">
  ...
</div>

<!-- Input group normal -->
<div class="input-group">
  ...
</div>

<!-- Input group small -->
<div class="input-group input-group-sm">
  ...
</div>

<!-- Addon on the left -->
                      <div class="input-group input-group mb-4">
                        <span class="input-group-text">
                          <i class="ci-lock"></i>
                        </span>
                        <input type="password" class="form-control" placeholder="Password">
                      </div>

                      <!-- Addon on the right -->
                      <div class="input-group input-group mb-4">
                        <input type="text" class="form-control" placeholder="Recipient's e-mail">
                        <span class="input-group-text">@example.com</span>
                      </div>

                      <!-- Addons on both sides -->
                      <div class="input-group input-group mb-3">
                        <span class="input-group-text">$</span>
                        <input type="text" class="form-control" placeholder="Amount">
                        <span class="input-group-text">.00</span>
                      </div>