title: how to make reponsive model popup in bootstrap version 3?
body: <p>i wan to show the popup on few area for html :</p>
  
  <p><img src="https://i.stack.imgur.com/3KYgb.png" alt="enter image description here"></p>
  
  <p>for 1st popup will cover box no 5, 6,9,11</p>
  
  <p>and 2nd popup will cover box no,7,8,10,12</p>
  
  <p>and <strong>when i do re size my browser, it should cover those box :</strong></p>
  
  <p>for this, i created this : please check the following html in jsfiddle.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;style&gt;
       .margin1 {
              padding-bottom: 5px;
              padding-left: 2.5px!important;
              padding-right: 2.5px!important;
          }
  
          .fixwidh {
              /*min-width: 295px;*/
          }
  
          .btnClass {
              width: 40%;
              height: 20%;
          }
  
          .topmargin {
              height: 10px;
              width: 100%;
          }
  
          .sidemargin {
              background-color: #e0e0e0;
          }
  
          .mainContent {
              width: 94%;
              background-color: red;
          }
  
          .verticaltextname1 {
              position: absolute;
              color: gray;
              -webkit-text-shadow: 1px 1px 3px rgba(150,150,150,1);
              text-shadow: 1px 1px 3px rgba(150,150,150,1);
              font-size: 20px;
              font-family: Raleway,Arial!important;
              -moz-transform: rotate(-90deg);
              -ms-transform: rotate(-90deg);
              -o-transform: rotate(-90deg);
              -webkit-transform: rotate(-90deg);
              transform: rotate(-90deg);
              top: 20px;
          }
  
          .topBox {
              min-height: 121px;
              margin-bottom: 10px;
              margin-right: -20px;
              background-color: grey;
          }
  
          .topBox2 {
              min-height: 121px;
              margin-bottom: 10px;
              margin-top: 20px;
              margin-right: -20px;
              background-color: #c2c2c2;
              box-shadow: 0px 0px 10px #000000;
              border-top: 1px solid #cbcbcb;
              border-left: 1px solid #f6f6f6;
              border-bottom: 1px solid #c5c5c5;
              border-right: 1px solid #cdcdcd;
          }
  
          .topBox3 {
              min-height: 64px;
              margin-bottom: 10px;
              margin-right: -20px;
              background-color: grey;
          }
  
  
          .pClass {
              color: #ffffff;
              -webkit-transform: rotate(-90deg);
              margin-top: 82px;
              min-width: 71px;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet" /&gt;
          &lt;div class="container-fluid"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-md-1 col-lg-1  col-sm-1 col-xs-1"&gt;
                      &lt;div class="row"&gt;
                          &lt;div class="pClass"&gt;Work History&lt;/div&gt;
                          &lt;div&gt;
                              &lt;span class="verticaltextname1"&gt;1&lt;/span&gt;
                          &lt;/div&gt;
                          &lt;div&gt;
                              &lt;span class="verticaltextname1"&gt;2&lt;/span&gt;
                          &lt;/div&gt;
  
                          &lt;div class="pClass"&gt;Projects&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-10 col-lg-10  col-sm-10 col-xs-10"&gt;
                      &lt;div class="row"&gt;
                          &lt;div class="col-md-3 col-sm-6"&gt;
                              &lt;div class="topBox2"&gt;1&lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="col-md-3 col-sm-6"&gt;
                              &lt;div class="topBox2"&gt;2&lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="col-md-3 col-sm-6"&gt;
                              &lt;div class="topBox2"&gt;3&lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="col-md-3 col-sm-6"&gt;
                              &lt;div class="topBox2"&gt;4&lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="row"&gt;
                          &lt;div class="col-md-3 col-sm-6"&gt;
                              &lt;div class="topBox"&gt;5&lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="col-md-3 col-sm-6"&gt;
                              &lt;div class="topBox"&gt;6&lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="col-md-3 col-sm-6"&gt;
                              &lt;div class="topBox"&gt;7&lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="col-md-3 col-sm-6"&gt;
                              &lt;div class="topBox"&gt;8&lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="row"&gt;
                          &lt;div class="col-md-6 col-sm-6"&gt;
                              &lt;div class="topBox3"&gt;
                                  9
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="col-md-6 col-sm-6"&gt;
                              &lt;div class="topBox3"&gt;
                                  10
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="row"&gt;
                          &lt;div class="col-md-6 col-sm-6"&gt;
                              &lt;div class="topBox"&gt;
                                  11
                              &lt;/div&gt;
                              &lt;div&gt;&lt;a href="#" class="btn btn-lg btn-primary" data-toggle="modal" data-target="#basicModal"&gt;X&lt;/a&gt;&lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="col-md-6 col-sm-6"&gt;
                              &lt;div class="topBox"&gt;
                                  12
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-1 col-lg-1  col-sm-1 col-xs-1"&gt;
                      &lt;div class="sidemargin"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-md-1 col-lg-1  col-sm-1 col-xs-1"&gt;
                      &lt;div class="sidemargin"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-10 col-sm-10"&gt;
                      &lt;div style="background-color: black; height: 100%; width: 102%; border: 1px solid red;"&gt;
                          Carousel Div
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-1 col-lg-1  col-sm-1 col-xs-1"&gt;
                      &lt;div class="sidemargin"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true"&gt;
                  &lt;div class="modal-dialog"&gt;
                      &lt;div class="modal-content"&gt;
                          &lt;div class="modal-header"&gt;
                              &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
                              &lt;h4 class="modal-title" id="myModalLabel"&gt;Basic Modal&lt;/h4&gt;
                          &lt;/div&gt;
                          &lt;div class="modal-body"&gt;
                              &lt;h3&gt;Modal Body&lt;/h3&gt;
                          &lt;/div&gt;
                          &lt;div class="modal-footer"&gt;
                              &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
                              &lt;button type="button" class="btn btn-primary"&gt;Save changes&lt;/button&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;!-- Placed at the end of the document so the pages load faster --&gt;
              &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
              &lt;script src="http://getbootstrap.com/dist/js/bootstrap.min.js"&gt;&lt;/script&gt;
          &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>