<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <a href="#myModal" role="button" class="btn btn-primary" data-toggle="modal">Launch modal</a> <div class="modal" id="myModal" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog pop-block" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Modal</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body p-4" id="result"> <p>The grid inside the modal is responsive too..</p> <div class="row"> <div class="col-md-4"> <h3>Book a free 20min phone consultation</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim </p> <div class="form-group"> <input type="text" class="form-control b-line" id="" placeholder="Name"> </div> <div class="form-group"> <input type="text" class="form-control b-line" id="" placeholder="Email"> </div> <div class="form-group"> <input type="text" class="form-control b-line" id="" placeholder="Phone"> </div> </div> <div class="col-md-4"></div> <div class="col-md-4"> <button type="submit" class="btn btn-primary">Submit</button> </div> </div> </div> </div> </div> </div>

.pop-block { min-width: 100%; margin: 0; } .pop-block .modal-content { min-height: 100vh; } .pop-block .b-line{ border-radius:0; border:none; border-bottom:1px solid #232323; }