<div class="container my-5">

      <!-- Section: Introduction -->

      <section class="">

        <p>Free examples of Bootstrap Inline outline form. Different design, templates & usage. </p>

​

        <p>

          Detailed documentation and more examples you can find in our

          <a href="https://mdbootstrap.com/docs/standard/forms/overview/" target="_blank"><strong>Forms Docs</strong></a

          >.

        </p>

​

        <hr class="mt-5" />

​

        <p>

          Built with

          <a target="_blank" href="https://mdbootstrap.com/docs/standard/"

            >Material Design for Bootstrap</a

          >

          - free and powerful Bootstrap UI KIT

        </p>

​

        <a

          class="btn btn-primary me-2"

          href="https://mdbootstrap.com/docs/standard/getting-started/installation/"

          target="_blank"

          role="button"

          >Download MDB UI KIT<i class="fas fa-download ms-2"></i

        ></a>

        <a

          class="btn btn-danger me-2"

          target="_blank"

          href="https://mdbootstrap.com/docs/standard/"

          role="button"

          >Learn more</a

        >

        <a

          class="btn btn-success me-2"

          target="_blank"

          href="https://mdbootstrap.com/docs/standard/getting-started/"

          role="button"

          >Tutorials</a

        >

        <a

          class="btn btn-dark me-2"

          target="_blank"

          href="https://github.com/mdbootstrap/mdb-ui-kit"

          role="button"

          >GitHub<i class="fab fa-github ms-2"></i

        ></a>

      </section>

      <!-- Section: Introduction -->

​

      <hr class="mb-5" />

​

      <!-- Section: Basic example -->

​

      <p><strong>Centered</strong></p>

      <section class="p-3">

        <!-- Section: Form -->

        <section class="">

          <form action="">

            <!--Grid row-->

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

              <!--Grid column-->

              <div class="col-auto">

                <p class="pt-2">

                  <strong>Sign up for our newsletter</strong>

                </p>

              </div>

              <!--Grid column-->

​

              <!--Grid column-->

              <div class="col-md-5 col-12">

                <!-- Email input -->

                <div class="form-outline mb-4">

                  <input type="email" id="form5Example2" class="form-control" />

                  <label class="form-label" for="form5Example2"

                    >Email address</label

                  >

                </div>

              </div>

              <!--Grid column-->

​

              <!--Grid column-->

              <div class="col-auto">

                <!-- Submit button -->

                <button type="submit" class="btn btn-primary mb-4">

                  Subscribe

                </button>

              </div>

              <!--Grid column-->

            </div>

            <!--Grid row-->

          </form>

        </section>

        <!-- Section: Form -->

      </section>

      <!-- Section: Basic example -->

​

      <hr class="my-5" />

​

      <!-- Section: Left aligned -->

​

      <p><strong>Left aligned</strong></p>

      <section class="p-3">

        <!-- Section: Form -->

        <section class="">

          <form action="">

            <!--Grid row-->

            <div class="row">

              <!--Grid column-->

              <div class="col-auto">

                <p class="pt-2">

                  <strong>Sign up for our newsletter</strong>

                </p>

              </div>

              <!--Grid column-->

​

              <!--Grid column-->

              <div class="col-md-5 col-12">

                <!-- Email input -->

                <div class="form-outline mb-4">

                  <input type="email" id="form5Example2" class="form-control" />

                  <label class="form-label" for="form5Example2"

                    >Email address</label

                  >

                </div>

              </div>

              <!--Grid column-->

​

              <!--Grid column-->

              <div class="col-auto">

                <!-- Submit button -->

                <button type="submit" class="btn btn-primary mb-4">

                  Subscribe

                </button>

              </div>

              <!--Grid column-->

            </div>

            <!--Grid row-->

          </form>

        </section>

        <!-- Section: Form -->

      </section>

      <!-- Section: Left aligned -->

​

      <hr class="my-5" />

​

      <!-- Section: Left aligned -->

​

      <p><strong>Dark variant</strong></p>

      <section class="p-4 pb-0 bg-dark">

        <!-- Section: Form -->

        <section class="text-white">

          <form action="">

            <!--Grid row-->

            <div class="row">

              <!--Grid column-->

              <div class="col-auto">

                <p class="pt-2">

                  <strong>Sign up for our newsletter</strong>

                </p>

              </div>

              <!--Grid column-->

​

              <!--Grid column-->

              <div class="col-md-5 col-12">

                <!-- Email input -->

                <div class="form-outline form-white mb-4">

                  <input type="email" id="form5Example2" class="form-control" />

                  <label class="form-label" for="form5Example2"

                    >Email address</label

                  >

                </div>

              </div>

              <!--Grid column-->

​

              <!--Grid column-->

              <div class="col-auto">

                <!-- Submit button -->

                <button type="submit" class="btn btn-outline-light mb-4">

                  Subscribe

                </button>

              </div>

              <!--Grid column-->

            </div>

            <!--Grid row-->

          </form>

        </section>

        <!-- Section: Form -->

      </section>

      <!-- Section: Left aligned -->

    </div>