Bootstrap framework snippet Locked Screen

This bootstrap framework snippet "Locked Screen" was designed to help people of all skill levels - designer or developer,
huge nerd or early beginner. copy and paste the code. Use it as a complete kit or use it to start something more complex.
tags: bootstrap,snippet,locked,screen

<div class="container bootstrap snippet"> <div class="row"> <div class="col-sm-8 col-md-5 col-md-offset-4"> <div class="panel panel-success panel-circle"> <div class="panel-body"> <form role="form" action="#" method="POST"> <fieldset> <div class="row text-center"> <p class="bg-success title">Daniel snathanson</p> <br/> </div> <div class="row"> <div class="center-block"> <img class="profile-img img-thumbnail" src="" alt=""> </div> </div> <div class="row"> <div class="col-sm-12 col-md-10 col-md-offset-1 "> <div class="form-group"> <div class="input-group text-center"> <small> Lorem Ipsum is simply dummy text of the printing and typesetting industry printing. Donec non dignissim eros </small> </div> </div> <div class="form-group"> <div class="input-group"> <span class="input-group-addon"> <i class="glyphicon glyphicon-lock"></i> </span> <input class="form-control" placeholder="Password" name="password" type="password" value="" autofocus> </div> </div> <div class="form-group"> <button type="submit" class="btn btn-lg btn-success btn-block"> <i class="glyphicon glyphicon-share-alt"></i> Continue </button> </div> </div> </div> </fieldset> </form> </div> </div> </div> </div> </div>
.title{ width:80%; font-size:18px; margin:auto; } .panel-circle{ -moz-border-radius: 20%; -webkit-border-radius: 20%; border-radius: 20%; box-shadow: 5px 5px 0 rgba(0,0,0,0.08); } .panel-heading { padding: 5px 15px; } .panel-footer { padding: 1px 15px; color: #A0A0A0; } .profile-img { width: 96px; height: 96px; margin: 0 auto 10px; display: block; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; }

Creator of this snippet

Dey Dey

Bootstrap version: 3.3.1

Created: Nov 3rd 2014, 20:13

Views: 4.6K