<div class="container my-4">

  <p>

    <strong>You can easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.

      See the examples.</strong>

  </p>

​

  <p>

    Detailed documentation and more examples you can find in our

    <a href="https://mdbootstrap.com/docs/standard/forms/input-fields/" target="_blank"><strong>Bootstrap

      Input fields Docs</strong></a>

  </p>

​

​

  <hr />

​

  <p class="font-weight-bold">Basic example</p>

​

  <p>

    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 <code>&lt;label&gt;</code>s outside the input group.

  </p>

​

  <div class="border p-5">

    <!-- Copy this code to have a working example -->

    <div class="d-flex justify-content-center">

      <div>

        <div class="input-group mb-3">

          <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>

​

        <div class="input-group mb-3">

          <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>

​

        <label for="basic-url" class="form-label">Your vanity URL</label>

        <div class="input-group mb-3">

          <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>

​

        <div class="input-group mb-3">

          <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>

​

        <div class="input-group mb-3">

          <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>

​

        <div class="input-group">

          <span class="input-group-text">With textarea</span>

          <textarea class="form-control" aria-label="With textarea"></textarea>

        </div>

​

      </div>

    </div>

    <!--/ Copy this code to have a working example -->

  </div>

​

  <p class="font-weight-bold mt-3">No border</p>

​

  <p>

    Add <code>.border-0</code> class to the <code>.input-group-text</code> to remove the border.

  </p>

​

  <div class="border p-5">

    <!-- Copy this code to have a working example -->

    <div class="d-flex justify-content-center">

      <div>

        <div class="input-group mb-3">

          <span class="input-group-text border-0" id="search-addon"

                ><i class="fas fa-search"></i

            ></span>

          <input

                 type="search"

                 class="form-control rounded"

                 placeholder="Search"

                 aria-label="Search"

                 aria-describedby="search-addon"

                 />

        </div>

​

        <div class="input-group mb-3">

          <span class="input-group-text border-0" id="basic-addon1">@</span>

          <input

                 type="text"

                 class="form-control rounded"

                 placeholder="Username"

                 aria-label="Username"

                 aria-describedby="basic-addon1"

                 />

        </div>

​

        <div class="input-group mb-3">

          <input

                 type="text"

                 class="form-control rounded"

                 placeholder="Recipient's username"

                 aria-label="Recipient's username"

                 aria-describedby="basic-addon2"

                 />

          <span class="input-group-text border-0" id="basic-addon2">@example.com</span>

        </div>

​

        <label for="basic-url" class="form-label">Your vanity URL</label>

        <div class="input-group mb-3">

          <span class="input-group-text border-0" id="basic-addon3"

                >https://example.com/users/</span

            >

          <input

                 type="text"

                 class="form-control rounded"

                 id="basic-url"

                 aria-describedby="basic-addon3"

                 />

        </div>

​

        <div class="input-group mb-3">

          <span class="input-group-text border-0">$</span>

          <input

                 type="text"

                 class="form-control rounded"

                 aria-label="Amount (to the nearest dollar)"

                 />

          <span class="input-group-text border-0">.00</span>

        </div>

​

        <div class="input-group">

          <span class="input-group-text border-0">With textarea</span>

          <textarea class="form-control rounded" aria-label="With textarea"></textarea>

        </div>

      </div>

      <!--/ Copy this code to have a working example -->

    </div>

​

​

​

  </div>

​

​