<div class="container mt-5"> <div class="row"> <div class="col-md-4"> <h2 class="font-weight-bold text-center mb-2">Casual survey</h2> </div> <div class="col-md-4"> <h2 class="font-weight-bold text-center mb-2">Card survey</h2> </div> <div class="col-md-4"> <h2 class="font-weight-bold text-center mb-2">Modal surveys</h2> </div> </div> <div class="row"> <div class="col-md-4 border border-light"> <h4 class="font-weight-bold text-center mt-3">Quick survey</h4> <hr> <div class="survey-head text-center"> <i class="fas fa-poll-h fa-3x blue-text mb-2"></i> <p class="font-weight-normal">Your opinion matters</p> <p>Have some ideas how to improve our product? <span class="font-weight-bold">Give us your feedback.</span> </p> </div> <hr> <p class="text-center">Your rating:</p> <div class="form-check mb-4"> <input class="form-check-input" name="group1" type="radio" id="radio-179" value="option1" checked> <label class="form-check-label" for="radio-179">Very good</label> </div> <div class="form-check mb-4"> <input class="form-check-input" name="group1" type="radio" id="radio-279" value="option2"> <label class="form-check-label" for="radio-279">Good</label> </div> <div class="form-check mb-4"> <input class="form-check-input" name="group1" type="radio" id="radio-379" value="option3"> <label class="form-check-label" for="radio-379">Mediocre</label> </div> <div class="form-check mb-4"> <input class="form-check-input" name="group1" type="radio" id="radio-479" value="option4"> <label class="form-check-label" for="radio-479">Bad</label> </div> <div class="form-check mb-4"> <input class="form-check-input" name="group1" type="radio" id="radio-579" value="option5"> <label class="form-check-label" for="radio-579">Very bad</label> </div> <!-- Radio --> <hr> <div class="survey-footer clearfix"> <a type="button" class="btn btn-primary waves-effect waves-light">Send <i class="fa fa-paper-plane ml-1"></i> </a> <a type="button" class="btn btn-outline-primary waves-effect float-right" data-dismiss="modal">Cancel</a> </div> </div> <div class="col-md-4"> <!-- Card Regular --> <div class="card card-cascade"> <!-- Card content --> <div class="card-body card-body-cascade text-center"> <!-- Title --> <h4 class="card-title"><strong>Quick survey</strong></h4> <hr> <!-- Subtitle --> <i class="fas fa-poll-h fa-3x blue-text mb-2"></i> <p class="font-weight-normal">Your opinion matters</p> <!-- Text --> <p>Have some ideas how to improve our product? <span class="font-weight-bold">Give us your feedback.</span> </p> </div> <hr> <p class="text-center">Your rating:</p> <div class="form-check mb-4"> <input class="form-check-input" name="group1" type="radio" id="radio-119" value="option1" checked> <label class="form-check-label" for="radio-119">Very good</label> </div> <div class="form-check mb-4"> <input class="form-check-input" name="group1" type="radio" id="radio-219" value="option2"> <label class="form-check-label" for="radio-219">Good</label> </div> <div class="form-check mb-4"> <input class="form-check-input" name="group1" type="radio" id="radio-319" value="option3"> <label class="form-check-label" for="radio-319">Mediocre</label> </div> <div class="form-check mb-4"> <input class="form-check-input" name="group1" type="radio" id="radio-419" value="option4"> <label class="form-check-label" for="radio-419">Bad</label> </div> <div class="form-check mb-4"> <input class="form-check-input" name="group1" type="radio" id="radio-519" value="option5"> <label class="form-check-label" for="radio-519">Very bad</label> </div> <hr> <div class="survey-footer clearfix"> <a type="button" class="btn btn-primary waves-effect waves-light ml-3 mb-3">Send <i class="fa fa-paper-plane ml-1"></i> </a> <a type="button" class="btn btn-outline-primary waves-effect float-right mr-3 mb-3" data-dismiss="modal">Cancel</a> </div> </div> </div> <!-- Card Regular --> <div class="col-md-4 text-center"> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalPoll-1">Right modal</button> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalSocial">Center modal</button> </div> </div> </div> <!-- Modal: modalPoll --> <div class="modal fade right" id="modalPoll-1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="false"> <div class="modal-dialog modal-full-height modal-right modal-notify modal-info" role="document"> <div class="modal-content"> <!--Header--> <div class="modal-header"> <p class="heading lead">Feedback request </p> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true" class="white-text">×</span> </button> </div> <!--Body--> <div class="modal-body"> <div class="text-center"> <i class="far fa-file-alt fa-4x mb-3 animated rotateIn"></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> <!-- Radio --> <p class="text-center"> <strong>Your rating</strong> </p> <div class="form-check mb-4"> <input class="form-check-input" name="group1" type="radio" id="radio-129" value="option1" checked> <label class="form-check-label" for="radio-129">Very good</label> </div> <div class="form-check mb-4"> <input class="form-check-input" name="group1" type="radio" id="radio-229" value="option2"> <label class="form-check-label" for="radio-229">Good</label> </div> <div class="form-check mb-4"> <input class="form-check-input" name="group1" type="radio" id="radio-329" value="option3"> <label class="form-check-label" for="radio-329">Mediocre</label> </div> <div class="form-check mb-4"> <input class="form-check-input" name="group1" type="radio" id="radio-429" value="option4"> <label class="form-check-label" for="radio-429">Bad</label> </div> <div class="form-check mb-4"> <input class="form-check-input" name="group1" type="radio" id="radio-529" value="option5"> <label class="form-check-label" for="radio-529">Very bad</label> </div> <!-- Radio --> </div> <!--Footer--> <div class="modal-footer justify-content-center"> <a type="button" class="btn btn-primary waves-effect waves-light">Send <i class="fa fa-paper-plane ml-1"></i> </a> <a type="button" class="btn btn-outline-primary waves-effect" data-dismiss="modal">Cancel</a> </div> </div> </div> </div> <!-- Modal: modalPoll --> <div class="modal fade" id="modalSocial" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog cascading-modal" role="document"> <!--Content--> <div class="modal-content"> <!--Header--> <div class="modal-header light-blue darken-3 white-text"> <h4 class="title"><i class="fas fa-users"></i> Quick survey</h4> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> </div> <!--Body--> <div class="modal-body mb-0 text-center"> <div class="survey-head text-center"> <i class="fas fa-poll-h fa-3x blue-text mb-2"></i> <p class="font-weight-normal">Your opinion matters</p> <p>Have some ideas how to improve our product? <span class="font-weight-bold">Give us your feedback.</span> </p> </div> <hr> <p class="text-center">Your rating:</p> <div class="form-check mb-4 clearfix"> <input class="form-check-input float-left" name="group1" type="radio" id="radio-139" value="option1" checked> <label class="form-check-label float-left" for="radio-139">Very good</label> </div> <div class="form-check mb-4 clearfix"> <input class="form-check-input float-left" name="group1" type="radio" id="radio-239" value="option2"> <label class="form-check-label float-left" for="radio-239">Good</label> </div> <div class="form-check mb-4 clearfix"> <input class="form-check-input float-left" name="group1" type="radio" id="radio-339" value="option3"> <label class="form-check-label float-left" for="radio-339">Mediocre</label> </div> <div class="form-check mb-4 clearfix"> <input class="form-check-input float-left" name="group1" type="radio" id="radio-439" value="option4"> <label class="form-check-label float-left" for="radio-439">Bad</label> </div> <div class="form-check mb-4 clearfix"> <input class="form-check-input float-left" name="group1" type="radio" id="radio-539" value="option5"> <label class="form-check-label float-left" for="radio-539">Very bad</label> </div> <!-- Radio --> <hr> <div class="survey-footer clearfix"> <a type="button" class="btn btn-primary waves-effect waves-light float-left">Send <i class="fa fa-paper-plane ml-1"></i> </a> <a type="button" class="btn btn-outline-primary waves-effect float-right" data-dismiss="modal">Cancel</a> </div> </div> </div> <!--/.Content--> </div> </div>