jquery - Bootstrap apply true full screen -

my html

  <div class="container-fluid">     <div class="row">         <div class="col-md-3">             <div class="left-top"><a>aanmelden</a></div>             <div class="left-bottom"><a>inloggen</a></div>         </div>         <div class="col-md-6">             <img src="http://placehold.it/350x310" alt="" class="welcome-image"/>         </div>         <div class="col-md-3">             <div class="right-top"></div>             <div class="right-bottom"></div>         </div>     </div> </div>  <script>     $(document).ready(function () {         $('[class^=left], [class^=right]').on('click', function () {             $(this).addclass('fullscreen');         });     }); </script> 

whenever button clicked i'd parent square go fullscreen, problem is:

• when using width:100% takes 100% of .col-md-3
• when use jquery remove .col-md-3 class parent whole page blows up.

fiddle

is there way achieve full screen whilst keeping rest intact ?

thanks, g3

bootply : http://www.bootply.com/dfnnqvtcrl

js :

$(document).ready(function () {     $('[class^=left], [class^=right]').on('click', function () {         $(this).parent().toggleclass('parent-fullscreen');         $(this).toggleclass('fullscreen');     }); }); 

css:

.parent-fullscreen{   position:absolute;   z-index:2000;   width:100%;   height:100%; } .fullscreen {   width: 100%;   height: 100%;   position:absolute;   top:0px; }