Overview

This is an additional option that extends the Bootstrap Input Group.

Basic

Place one add-on or button on either side of an input. You may also place one on both sides of an input. Remember to place <label> outside the input group.
@
@
Please choose a username.
@example.com
https://example.com/users/
$ .00
@
With textarea 
          <!--begin::Input group-->
<div class="input-group mb-5">
  <span class="input-group-text" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1"/>
</div>
<!--end::Input group-->

<!--begin::Input group-->
<div class="input-group mb-5">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2"/>
  <span class="input-group-text" id="basic-addon2">@example.com</span>
</div>
<!--end::Input group-->

<!--begin::Input group-->
<label for="basic-url" class="form-label">Your vanity URL</label>
<div class="input-group mb-5">
  <span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3"/>
</div>
<!--end::Input group-->

<!--begin::Input group-->
<div class="input-group mb-5">
  <span class="input-group-text">$</span>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)"/>
  <span class="input-group-text">.00</span>
</div>
<!--end::Input group-->

<!--begin::Input group-->
<div class="input-group mb-5">
  <input type="text" class="form-control" placeholder="Username" aria-label="Username"/>
  <span class="input-group-text">@</span>
  <input type="text" class="form-control" placeholder="Server" aria-label="Server"/>
</div>
<!--end::Input group-->

<!--begin::Input group-->
<div class="input-group">
  <span class="input-group-text">With textarea</span>
  <textarea class="form-control" aria-label="With textarea"></textarea>
</div>
<!--end::Input group-->

Solid Style

Add .input-group-solid custom class to use solid style input group.
@
@example.com
https://example.com/users/
$ .00
@
With textarea 
          <!--begin::Input group-->
<div class="input-group input-group-solid mb-5">
  <span class="input-group-text" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1"/>
</div>
<!--end::Input group-->

<!--begin::Input group-->
<div class="input-group input-group-solid mb-5">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2"/>
  <span class="input-group-text" id="basic-addon2">@example.com</span>
</div>
<!--end::Input group-->

<!--begin::Input group-->
<label for="basic-url" class="form-label">Your vanity URL</label>
<div class="input-group input-group-solid mb-5">
  <span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3"/>
</div>
<!--end::Input group-->

<!--begin::Input group-->
<div class="input-group input-group-solid mb-5">
  <span class="input-group-text">$</span>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)"/>
  <span class="input-group-text">.00</span>
</div>
<!--end::Input group-->

<!--begin::Input group-->
<div class="input-group input-group-solid mb-5">
  <input type="text" class="form-control" placeholder="Username" aria-label="Username"/>
  <span class="input-group-text">@</span>
  <input type="text" class="form-control" placeholder="Server" aria-label="Server"/>
</div>
<!--end::Input group-->

<!--begin::Input group-->
<div class="input-group input-group-solid">
  <span class="input-group-text">With textarea</span>
  <textarea class="form-control" aria-label="With textarea"></textarea>
</div>
<!--end::Input group-->

Sizing

Add the relative form sizing classes to the .input-group itself and contents within will automatically resize—no need for repeating the form control size classes on each element.
Small
Default
Large 
          <!--begin::Input group-->
<div class="input-group input-group-sm mb-5">
  <span class="input-group-text" id="inputGroup-sizing-sm">Small</span>
  <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm"/>
</div>
<!--end::Input group-->

<!--begin::Input group-->
<div class="input-group mb-5">
  <span class="input-group-text" id="inputGroup-sizing-default">Default</span>
  <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default"/>
</div>
<!--end::Input group-->

<!--begin::Input group-->
<div class="input-group input-group-lg">
  <span class="input-group-text" id="inputGroup-sizing-lg">Large</span>
  <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-lg"/>
</div>
<!--end::Input group-->

Icons

Use Keenicons, Bootstrap Icons, Font Awesome Icons  with Input Group's .input-group-text element as shown below.
.00 
          <!--begin::Input group-->
<div class="input-group mb-5">
  <span class="input-group-text" id="basic-addon1">
    <i class="ki-duotone ki-profile-circle fs-1"><span class="path1"></span><span class="path2"></span><span class="path3"></span></i>
  </span>
  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1"/>
</div>
<!--end::Input group-->

<!--begin::Input group-->
<div class="input-group mb-5">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2"/>
  <span class="input-group-text" id="basic-addon2">
    <i class="ki-duotone ki-sms fs-4"><span class="path1"></span><span class="path2"></span></i>
  </span>
</div>
<!--end::Input group-->

<!--begin::Input group-->
<div class="input-group mb-5">
  <span class="input-group-text" id="basic-addon3">
    <i class="ki-duotone ki-wallet fs-1"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span></i>
  </span>
  <input type="text" class="form-control" id="basic-url"  placeholder="Website URL" aria-describedby="basic-addon3"/>
</div>
<!--end::Input group-->

<!--begin::Input group-->
<div class="input-group mb-5">
  <span class="input-group-text">
    <i class="ki-duotone ki-calendar fs-2"><span class="path1"></span><span class="path2"></span></i>
  </span>
  <input type="text" class="form-control" placeholder="Amount (to the nearest dollar)"/>
  <span class="input-group-text">.00</span>
</div>
<!--end::Input group-->