Created
November 6, 2013 02:20
-
-
Save bMinaise/7329874 to your computer and use it in GitHub Desktop.
Bootstrap 3 - Login Form Example From: http://bootsnipp.com
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="container"> | |
<div class="row"> | |
<div class="col-sm-6 col-md-4 col-md-offset-4"> | |
<h1 class="text-center login-title">Sign in to continue to Bootsnipp</h1> | |
<div class="account-wall"> | |
<img class="profile-img" src="https://lh5.googleusercontent.com/-b0-k99FZlyE/AAAAAAAAAAI/AAAAAAAAAAA/eu7opA4byxI/photo.jpg?sz=120" | |
alt=""> | |
<form class="form-signin"> | |
<input type="text" class="form-control" placeholder="Email" required autofocus> | |
<input type="password" class="form-control" placeholder="Password" required> | |
<button class="btn btn-lg btn-primary btn-block" type="submit"> | |
Sign in</button> | |
<label class="checkbox pull-left"> | |
<input type="checkbox" value="remember-me"> | |
Remember me | |
</label> | |
<a href="#" class="pull-right need-help">Need help? </a><span class="clearfix"></span> | |
</form> | |
</div> | |
<a href="#" class="text-center new-account">Create an account </a> | |
</div> | |
</div> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.form-signin | |
{ | |
max-width: 330px; | |
padding: 15px; | |
margin: 0 auto; | |
} | |
.form-signin .form-signin-heading, .form-signin .checkbox | |
{ | |
margin-bottom: 10px; | |
} | |
.form-signin .checkbox | |
{ | |
font-weight: normal; | |
} | |
.form-signin .form-control | |
{ | |
position: relative; | |
font-size: 16px; | |
height: auto; | |
padding: 10px; | |
-webkit-box-sizing: border-box; | |
-moz-box-sizing: border-box; | |
box-sizing: border-box; | |
} | |
.form-signin .form-control:focus | |
{ | |
z-index: 2; | |
} | |
.form-signin input[type="text"] | |
{ | |
margin-bottom: -1px; | |
border-bottom-left-radius: 0; | |
border-bottom-right-radius: 0; | |
} | |
.form-signin input[type="password"] | |
{ | |
margin-bottom: 10px; | |
border-top-left-radius: 0; | |
border-top-right-radius: 0; | |
} | |
.account-wall | |
{ | |
margin-top: 20px; | |
padding: 40px 0px 20px 0px; | |
background-color: #f7f7f7; | |
-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); | |
} | |
.login-title | |
{ | |
color: #555; | |
font-size: 18px; | |
font-weight: 400; | |
display: block; | |
} | |
.profile-img | |
{ | |
width: 96px; | |
height: 96px; | |
margin: 0 auto 10px; | |
display: block; | |
-moz-border-radius: 50%; | |
-webkit-border-radius: 50%; | |
border-radius: 50%; | |
} | |
.need-help | |
{ | |
margin-top: 10px; | |
} | |
.new-account | |
{ | |
display: block; | |
margin-top: 10px; | |
} |
Awesome Thanks...!
Great work. Thank you.
Thank you ;-)
Thanks, this is nice demo i have used in my application which i need on urgent basis. Help me a-lot. :)
thanks
Thanks for sharing your knowledge my friend!!!
That's what I want exactly
simple and beautiful
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Great! Thanks