Bootstrap 3: responsive HTML popup

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?