Bootstrap 3: responsive HTML popup

Question

How can I make a responsive HTML popup with Bootstrap 3?

HTML,

<div class="center-pane">

  <div class="pane-left">
    Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.
  </div>

  <div class="pane-right">

    <form method="post" action="/login/">
      <div class="form-group">
        <label class=" required-field">E-Mail:</label>
        <input type="text" name="username" required id="id_username" class="form-control" maxlength="150">
      </div>
      <div class="form-group">
        <label class=" required-field">Password:</label>
        <input type="password" name="password" required class="form-control" id="id_password">
      </div>
      <button type="submit" class="btn btn-default btn-primary btn-block" value="Login">Login</button><br>
      <a href="/omg">I'm desperated!</a>
    </form>
    <div class="misc text-center">
      Some text
      <br>
      <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> |
      <a href="http://validator.w3.org/check/referer">HTML5</a>
    </div>
  </div>


</div>

CSS,

/* 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;
}

.center-pane is responsive when I resize my browser window. but not .pane-left and .pane-right - how can I make these two responsive as well?

EDIT:

if I use the model's solution, it seems more issues I need to tackle:

      <!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

the model dialog is not absolute vertically centre by default - how can I change that? also, how can i change the size of the dialog box then? and I need two columns - one left, one on the right to be responsive. 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.

also, you need to click on a button to trigger the dialog. I don't want to use the button to get the dialog box, I want to get the popup when the html doc is loaded. is it possible?

Answer 1

The width of the Pane-left and Pane-right must change dynamically when the browser is resized to make it responsive !

But if you provide it with a fixed width like width:value in px. The browser resizing wont have any effect on the div !

I recommend you to use inbuilt classes of BOOTSTRAP POPUP COMPONENTS ..

Learn more about BOOTSTRAP MODAL POPUPS -> HERE

Answer 2

Got my own solution with the columns method - col col-xs-6,

<div class="pane-left col col-xs-6">
 Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.
</div>

<div class="pane-right col col-xs-6">
....

</div>