title: Bootstrap 3: responsive HTML popup
body: <p>How can I make a responsive HTML popup with Bootstrap 3?</p>
  
  <p>HTML,</p>
  
  <pre><code>&lt;div class="center-pane"&gt;
  
    &lt;div class="pane-left"&gt;
      Use this document as a way to quickly start any new project.&lt;br&gt; All you get is this text and a mostly barebones HTML document.
    &lt;/div&gt;
  
    &lt;div class="pane-right"&gt;
  
      &lt;form method="post" action="/login/"&gt;
        &lt;div class="form-group"&gt;
          &lt;label class=" required-field"&gt;E-Mail:&lt;/label&gt;
          &lt;input type="text" name="username" required id="id_username" class="form-control" maxlength="150"&gt;
        &lt;/div&gt;
        &lt;div class="form-group"&gt;
          &lt;label class=" required-field"&gt;Password:&lt;/label&gt;
          &lt;input type="password" name="password" required class="form-control" id="id_password"&gt;
        &lt;/div&gt;
        &lt;button type="submit" class="btn btn-default btn-primary btn-block" value="Login"&gt;Login&lt;/button&gt;&lt;br&gt;
        &lt;a href="/omg"&gt;I'm desperated!&lt;/a&gt;
      &lt;/form&gt;
      &lt;div class="misc text-center"&gt;
        Some text
        &lt;br&gt;
        &lt;a href="http://jigsaw.w3.org/css-validator/check/referer"&gt;CSS&lt;/a&gt; |
        &lt;a href="http://validator.w3.org/check/referer"&gt;HTML5&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS,</p>
  
  <pre><code>/* HTML POPUP
  -------------------------------------------------- */
  .center-pane {
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    max-width: 1000px;
    height: 320px;
    border:1px solid red;
  }
  
  .pane-left,
  .pane-right{
      width:480px;
      float:left;
      border:1px solid blue;
  }
  </code></pre>
  
  <p><code>.center-pane</code> is responsive when I <strong>resize</strong> my browser window. but not <code>.pane-left</code> and 
      <code>.pane-right</code> - how can I make these two responsive as well?</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>if I use the <a href="http://getbootstrap.com/javascript/#modals" rel="nofollow noreferrer">model's solution</a>, it seems more issues I need to tackle:</p>
  
  <pre><code>      &lt;!-- Button trigger modal --&gt;
  &lt;button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"&gt;
    Launch demo modal
  &lt;/button&gt;
  
  &lt;!-- Modal --&gt;
  &lt;div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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;Modal title&lt;/h4&gt;
        &lt;/div&gt;
        &lt;div class="modal-body"&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;
  </code></pre>
  
  <p>the <code>model</code> dialog is not absolute <strong>vertically centre by default</strong> - how can I change that? also, how can i <strong>change the size</strong> of the dialog box then? and I need <strong>two columns - one left, one on the right to be responsive</strong>. how model can help me to do that. I can't see it in the documentation from bootstrap website. I would try to avoid to do any customization via js though. </p>
  
  <p>also, you need to <strong>click on a button</strong> to trigger the dialog. I <strong>don't want to use the button</strong> to get the dialog box, I want to get the popup when the html doc is loaded. is it possible?</p>