<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div id="enquirypopup" class="modal fade in" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content row"> <div class="modal-header custom-modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Enquire Now</h4> </div> <div class="modal-body"> <form name="info_form" class="form-inline" action="#" method="post"> <div class="form-group col-sm-12"> <input type="text" class="form-control" name="name" id="name" placeholder="Enter Name"> </div> <div class="form-group col-sm-12"> <input type="email" class="form-control" name="email" id="email" placeholder="Enter Email"> </div> <div class="form-group col-sm-12"> <input type="text" class="form-control" name="checkin" id="cheeckin" placeholder="Check-In Date"> </div> <div class="form-group col-sm-12"> <input type="text" class="form-control" name="checkout" id="cheeckout" placeholder="Check-Out Date"> </div> <div class="form-group col-sm-12"> <input type="text" class="form-control" name="phone" id="phone" placeholder="Enter Phone"> </div> <div class="form-group col-sm-12"> <textarea class="form-control" id="msg" name="msg" rows="4" placeholder="Enter Message"></textarea> </div> <div class="form-group col-sm-12"> <button type="submit" class="btn btn-default pull-right">Submit</button> </div> </form> </div> </div> </div> </div> <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#enquirypopup">Open Modal</button>

#enquirypopup .modal-dialog { width: 400px; padding: 0px ; position: relative; } #enquirypopup .modal-dialog { width: 400px; padding: 0px ; position: relative; } #enquirypopup .modal-dialog:before { content: ''; height: 0px; width: 0px; border-left: 50px solid #17B6BB; border-right: 50px solid transparent; border-bottom: 50px solid transparent; position: absolute; top: 1px; left: -14px; z-index: 99; } .custom-modal-header { text-align: center; color: #17b6bb; text-transform: uppercase; letter-spacing: 2px; border-top: 4px solid; } #enquirypopup .modal-dialog .close { z-index: 99999999; color: white; text-shadow: 0px 0px 0px; font-weight: normal; top: 4px; right: 6px; position: absolute; opacity: 1; } .custom-modal-header .modal-title { /* font-weight: bold; */ font-size: 18px; } #enquirypopup .modal-dialog:after { content: ''; height: 0px; width: 0px; /* border-right: 50px solid rgba(255, 0, 0, 0.98); */ border-right: 50px solid #17b6bb; border-bottom: 50px solid transparent; position: absolute; top: 1px; right: -14px; z-index: 999999; } .form-group { margin-bottom: 15px !important; } .form-inline .form-control { display: inline-block; width: 100%; vertical-align: middle; }