<!-- Button trigger modal -->

<button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary" data-mdb-modal-init data-mdb-target="#exampleModal">

  Launch demo modal

</button>

​

<!-- Modal -->

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">

  <div class="modal-dialog mx-0 mx-sm-auto">

    <div class="modal-content">

      <div class="modal-header bg-primary">

        <h5 class="modal-title text-white" id="exampleModalLabel">Feedback request</h5>

        <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn-close text-white" data-mdb-dismiss="modal" aria-label="Close"></button>

      </div>

      <div class="modal-body">

        <div class="text-center">

          <i class="far fa-file-alt fa-4x mb-3 text-primary"></i>

          <p>

            <strong>Your opinion matters</strong>

          </p>

          <p>

            Have some ideas how to improve our product?

            <strong>Give us your feedback.</strong>

          </p>

        </div>

​

        <hr />

​

        <form class="px-4" action="">

          <p class="text-center"><strong>Your rating:</strong></p>

​

          <div class="form-check mb-2">

            <input class="form-check-input" type="radio" name="exampleForm" id="radio4Example1" />

            <label class="form-check-label" for="radio4Example1">

              Very good

            </label>

          </div>

          <div class="form-check mb-2">

            <input class="form-check-input" type="radio" name="exampleForm" id="radio4Example2" />

            <label class="form-check-label" for="radio4Example2">

              Good

            </label>

          </div>

          <div class="form-check mb-2">

            <input class="form-check-input" type="radio" name="exampleForm" id="radio4Example3" />

            <label class="form-check-label" for="radio4Example3">

              Medicore

            </label>

          </div>

          <div class="form-check mb-2">

            <input class="form-check-input" type="radio" name="exampleForm" id="radio4Example4" />

            <label class="form-check-label" for="radio4Example4">

              Bad

            </label>

          </div>

          <div class="form-check mb-2">

            <input class="form-check-input" type="radio" name="exampleForm" id="radio4Example5" />

            <label class="form-check-label" for="radio4Example5">

              Very bad

            </label>

          </div>

​

          <p class="text-center"><strong>What could we improve?</strong></p>

​

          <!-- Message input -->

          <div data-mdb-input-init class="form-outline mb-4">

            <textarea class="form-control" id="form4Example4" rows="4"></textarea>

            <label class="form-label" for="form4Example4">Your feedback</label>

          </div>

        </form>

      </div>

      <div class="modal-footer">

        <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-outline-primary" data-mdb-dismiss="modal">

          Close

        </button>

        <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary">Submit</button>

      </div>

    </div>

  </div>

</div>

​

​