<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 class="container"> <div class="row"> <h2>Windows 8 Bootstrap Modals </h2> </div> <div class="row"> <!-- Large modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Windows 8 modal - Click to View</button> <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-body"> <div class="row"> <div class="col-md-8" style="border-right: 1px dotted #C2C2C2;padding-right: 30px;"> <H2>Thank You!</H2> <h4>With your data, Anna can help you answer these 5 questions</h4> <ul> <li>First question</li> <li>Second question</li> <li>and so on</li> </ul> <h4>Would you like to sign up to Hyper Anna to see the answers?</h4> </div> <div class="col-md-4"> <div class="row text-center sign-with "> <div class="col-md-12 outer-div"> <div class="btn-group btn-group-justified inner-div"> <a href="#" class="btn btn-danger">Sign Up</a> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>

.modal { /* display: block;*/ padding-right: 0px; background-color: rgba(4, 4, 4, 0.8); } .modal-dialog { top: 20%; width: 100%; position: absolute; } .modal-content { border-radius: 0px; border: none; top: 40%; } .modal-body { background-color: #0f8845; color: white; } .outer-div { padding: 30px; } .inner-div { margin: 0 auto; width: 100px; }