<div class="container my-4">

​

    <p class="font-weight-bold">An example of bootstrap file component. Easy to implement and customize. Examples of basic and advanced usage.</p>

​

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

          target="_blank">Bootstrap File Input Docs</a> </p>

​

    <hr>

​

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

    <p class="note note-info"><strong>Note info:</strong> If you need more advanced functionalities, have a look at our

    <a href="https://mdbootstrap.com/plugins/jquery/file-upload/">Drag and drop file upload plugin</a>.

  </p>

            <div class="row">

​

          <!--Grid column-->

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

            <!--Title-->

            <h2 class="">

              Default file input

            </h2>

            <!--Description-->

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

            <!-- Description -->

            <p>The file input is the most gnarly of the bunch and requires additional JavaScript if you’d like to hook them up

              with functional Choose file… and selected file name text.

            </p>

            <!--Section: Live preview-->

            <section class="section-preview">

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

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

                  <span class="input-group-text" id="inputGroupFileAddon01">Upload</span>

                </div>

                <div class="custom-file">

                  <input type="file" class="custom-file-input" id="inputGroupFile01" aria-describedby="inputGroupFileAddon01">

                  <label class="custom-file-label" for="inputGroupFile01">Choose file</label>

                </div>

              </div>

            </section>

            <!--Section: Live preview-->

          </div>

          <!--Grid column-->

          <!--Grid column-->

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

            <!--Title-->

            <h2 class="">

              Material file input

              <a href="https://mdbootstrap.com/products/jquery-ui-kit/" target="_blank" class="btn btn-danger btn-sm waves-effect waves-light" role="button">MDB

                Pro component

                <i class="far fa-gem ml-1"></i>

              </a>

            </h2>

            <!--Description-->

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

            <!--Section: Live preview-->

            <section class="section-preview">

              <form class="md-form my-3">

                <div class="file-field">

                  <div class="btn btn-primary btn-sm float-left waves-effect waves-light">

                    <span>Choose file</span>

                    <input type="file">

                  </div>

                  <div class="file-path-wrapper">

                    <input class="file-path validate" type="text" placeholder="Upload your file">

                  </div>

                </div>

              </form>

            </section>

            <!--Section: Live preview-->

          </div>

          <!--Grid column-->

        </div>

​

  </div>