<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus</p> </div> </div> <div class="page-splash"> <div class="container"> <div class="row"> <div class="col-sm-6 col-md-4 col-md-offset-4"> <div class="panel panel-default account-panel"> <div class="panel-heading"> <h3 class="panel-title"><span class="glyphicon glyphicon-lock"></span> Enter password to unlock</h3> </div> <div class="panel-body"> <div class="center-block text-center"> <img class="img-thumbnail img-circle" src="https://lh5.googleusercontent.com/-b0-k99FZlyE/AAAAAAAAAAI/AAAAAAAAAAA/eu7opA4byxI/photo.jpg?sz=120" alt=""> <p>Username</p> <form class="unlock-form"> <div class="input-group"> <span class="input-group-addon"> <i class="glyphicon glyphicon-lock"></i> </span> <input type="password" class="form-control" placeholder="Password" required autofocus> </div> <button type="button" class="btn btn-primary btn-block">Unlock</button> </form> </div> </div> </div> </div> </div> </div> </div>

.account-panel { margin-top: 20%; -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); } .unlock-form .input-group-addon:first-child { border-bottom-left-radius: 0; } .unlock-form .input-group-btn:last-child>.btn, .input-group .form-control:last-child { border-bottom-right-radius: 0; } .unlock-form .btn-block { margin-top: 5px; border-top-right-radius: 0; border-top-left-radius: 0; } .page-splash { z-index: 99999 !important; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #999; opacity: .9; pointer-events: auto; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: opacity 0.3s linear; -moz-transition: opacity 0.3s linear; -o-transition: opacity 0.3s linear; transition: opacity 0.3s linear; }