<div class="container my-4">

​

    <p class="font-weight-bold">Input group is used for collecting data entered by users. It usually contains buttons, text areas or other inputs. With this component, your forms are attractive and easy to customize.</p>

​

    <p><strong>Detailed documentation and more examples you can find in our <a href="https://mdbootstrap.com/docs/jquery/forms/input-group/"

          target="_blank">Input Group Docs</a> </p>

​

    <hr>

​

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

            <div class="row">

​

          <!--Grid column-->

          <div class="col-md-6 mb-md-0 mb-4">

            <!--Title-->

            <h2 class="secondary-heading mb-3">

              Default input groups

            </h2>

            <p>Default styling for Bootstrap Input Group component</p>

            <!--Section: Live preview-->

            <section class="section-preview">

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

                <div class="input-group-prepend">

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

                </div>

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

                <div class="input-group-append">

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

                </div>

              </div>

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

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

                <div class="input-group-prepend">

                  <span class="input-group-text" id="basic-addon3">https://example.com/users/</span>

                </div>

                <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">

              </div>

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

                <div class="input-group-prepend">

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

                </div>

                <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">

                <div class="input-group-append">

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

                </div>

              </div>

              <div class="input-group">

                <div class="input-group-prepend">

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

                </div>

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

              </div>

            </section>

            <!--Section: Live preview-->

          </div>

          <!--Grid column-->

          <!--Grid column-->

          <div class="col-md-6 mb-md-0 mb-4">

            <!--Title-->

            <h2 class="secondary-heading mb-3">

              Material input groups

            </h2>

            <p>Material Design styling for Bootstrap Input Group component</p>

            <!--Section: Live preview-->

            <section class="section-preview">

              <div class="md-form input-group mt-0 mb-3">

                <div class="input-group-prepend">

                  <span class="input-group-text md-addon" id="material-addon1">@</span>

                </div>

                <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="material-addon1">

              </div>

              <div class="md-form input-group mb-4">

                <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="material-addon2">

                <div class="input-group-append">

                  <span class="input-group-text md-addon" id="material-addon2">@example.com</span>

                </div>

              </div>

              <label class="mb-0 ml-2" for="material-url">Your vanity URL</label>

              <div class="md-form input-group mt-0 mb-3">

                <div class="input-group-prepend">

                  <span class="input-group-text md-addon" id="material-addon3">https://example.com/users/</span>

                </div>

                <input type="text" class="form-control" id="material-url" aria-describedby="material-addon3">

              </div>

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

                <div class="input-group-prepend">

                  <span class="input-group-text md-addon">$</span>

                </div>

                <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">

                <div class="input-group-append">

                  <span class="input-group-text md-addon">.00</span>

                </div>

              </div>

              <div class="md-form input-group mb-0">

                <div class="input-group-prepend">

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

                </div>

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

              </div>

            </section>

            <!--Section: Live preview-->

          </div>

          <!--Grid column-->

        </div>

​

  </div>