<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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-fluid"> <div class="row"> <div class="col-xs-6 col-md-6 big-box" id="first-child"> <h2 data-toggle="modal" data-target="#modal1">HI Welcome To Full Width</h2> <!-- Modal --> <div class="modal fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content modal-content-one"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title" id="myModalLabel">Introduction Popup</h4> </div> <div class="modal-body"> MODAL POPUP CONTENT ..... </div> </div> </div> </div> </div> <div class="col-xs-6 col-md-6 big-box" id="second-child"> <h2 data-toggle="modal" data-target="#modal2">MODAL POPUP</h2> <!-- Modal --> <div class="modal fade" id="modal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content modal-content-two"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title" id="myModalLabel">MODAL POPUP CONTENT .....</h4> </div> <div class="modal-body"> MODAL POPUP CONTENT ... </div> </div> </div> </div> </div> </div> <div class="row"> <div class="col-xs-6 col-md-6 big-box" id="third-child"> <h2 data-toggle="modal" data-target="#modal3">MODAL POPUP</h2> <!-- Modal --> <div class="modal fade" id="modal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content modal-content-three"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title" id="myModalLabel">MODAL POPUP CONTENT .....</h4> </div> <div class="modal-body"> MODAL POPUP CONTENT .... </div> </div> </div> </div> </div> <div class="col-xs-6 col-md-6 big-box" id="fourth-child"> <h2 data-toggle="modal" data-target="#modal4">MODAL POPUP</h2> <!-- Modal --> <div class="modal fade" id="modal4" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content modal-content-four"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title" id="myModalLabel">MODAL POPUP CONTENT .....</h4> </div> <div class="modal-body"> MODAL POPUP CONTENT ... </div> </div> </div> </div> </div> </div> </div>

.modal-dialog { width: 100%; height: 100%; padding: 0; margin:0; } .modal-content { height: 100%; border-radius: 0; color:white; overflow:auto; } .close { color:white ! important; opacity:1.0; } #first-child { top:0; left:0; background-color: yellowgreen; } #second-child { top:0; left:50%; background-color: #E6537D; color:black; } #third-child { top:50%; left:0; background-color: crimson; } #fourth-child { top:50%; left:50%; background-color: lightseagreen; color:black; } .big-box { position: absolute; width: 50%; height: 50%; color:white; } .big-box h2 { text-align: center; margin-top: 20%; padding: 20px; width: 100%; font-size: 1.8em; letter-spacing: 2px; font-weight: 700; text-transform: uppercase; cursor:pointer; } @media screen and (max-width: 46.5em) { .big-box h2 { font-size:16px; padding-left:0px; } } @media screen and (max-width: 20.5em) { .big-box h2 { font-size:12px; padding-left:0px; margin-top:30%; } } .modal-dialog { width: 100%; height: 100%; padding: 0; margin:0; } .modal-content { height: 100%; border-radius: 0; color:white; overflow:auto; } .modal-title { font-size: 3em; font-weight: 300; margin: 0 0 20px 0; } .modal-content-one { background-color:yellowgreen; } .modal-content-two { background-color:#E6537D; } .modal-content-three { background-color:crimson; } .modal-content-four { background-color:lightseagreen; }