<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <h2 class="text-center mt-5">Bootatrap Custom Modal</h2> <div class="row"> <div class="col-md-6 offset-md-3 text-center"> <button href="javascript:void(0)" data-toggle="modal" data-target="#subscribe_modal" class="btn btn-primary">Click To Open Modal</button> </div> </div> </div> <div class="modal fade subscribe_modal mt-5" id="subscribe_modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog modal-div" role="document"> <div class="modal-content mt-5"> <div class="modal-body subscribe_section"> <div class="logo-container mb-3"><img src="https://webcentcreations.com/assets/images/snippet_images_dummy/demo_logo2.png" class="logo_header m-auto"></div> <button type="button" class="close modal-close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <h5 class="modal-title text-center" id="exampleModalLabel">Subscribe To Our Newsletter</h5> <div class="input-group mb-3 mt-2"> <input type="email" id="subscribe_email_id" class="form-control input-field" placeholder="Email-ID"> </div> <div class="input-group text-center"> <button class="btn btn-oval submit-box-btn pl-5 pr-5 m-auto" type="button">Subscribe</button> </div> </div> </div> </div> </div>

.modal-close{ position: absolute; top: -10px; right: -10px; background-color: #ffffff !important; border: 2px solid #000 !important; border-radius: 47px; padding: 0px 5px !important; color: #000; font-weight: bolder; font-size: 16px; opacity: 1; line-height: 1.4; } { border-color: inherit; } .subscribe_section{ background-color: #efefef !important; border-radius: 12px; padding: 2em; } .logo-container{ margin: auto; position:relative; text-align: center; } .logo_header{ width:150px; } .subscribe_modal .modal-title{ color:#4b5986; } .input-field, .input-field:focus{ background: transparent; border: 2px solid #4b5986; color: #fff !important; } .btn-oval{ background: linear-gradient(#889ad6, #626f9a, #3d486d); color: #fff; border-radius: 20px; padding: 0.5em 2em; font-size: 18px; border: 2px solid #4b5986; transition: all .3s ease-in-out; } .btn-oval:hover,.btn-oval:focus{ background: linear-gradient(#889ad6, #626f9a); color: #fff; border-color: #626f9a !important; transition: all .3s ease-in-out; }