Skip to content

Instantly share code, notes, and snippets.

@bMinaise
Created November 6, 2013 02:20
Show Gist options
  • Save bMinaise/7329874 to your computer and use it in GitHub Desktop.
Save bMinaise/7329874 to your computer and use it in GitHub Desktop.
Bootstrap 3 - Login Form Example From: http://bootsnipp.com
<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>
.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;
}
@ywang04
Copy link

ywang04 commented May 14, 2016

thx a lot!

Copy link

ghost commented May 18, 2016

Muchas gracias 👍

@rizkynoor
Copy link

punteun pami preview na aya?

@cancerian0684
Copy link

remember-me checkbox seems little messed up, modifying it to the below code shall fix the issue.
<div class="col-sm-offset-1"> <label class="checkbox pull-left"> <input type="checkbox" value="remember-me"> Remember me </label> </div>

Thanks for sharing such a beautiful peace of code.

@LuisHCK
Copy link

LuisHCK commented Aug 17, 2016

Gracias Amigo!
i use it in my app 💯

@exponent56
Copy link

good work

@adm0442
Copy link

adm0442 commented Sep 5, 2016

server side code?

@NuNuYin
Copy link

NuNuYin commented Sep 21, 2016

Thank you ,Sir !

@msomi22
Copy link

msomi22 commented Nov 18, 2016

Good

@glituma
Copy link

glituma commented Dec 8, 2016

Gracias, mil gracias... lo utilice en asp.net + bootstrap
ejemplo

@ChuksFestus
Copy link

not bad

@Vilintritenmert
Copy link

perfect

@Hollyn
Copy link

Hollyn commented Feb 13, 2017

Great! Thanks

@GaneshShetty951
Copy link

Awesome Thanks...!

@Ramdharan
Copy link

Great work. Thank you.

@TomParris
Copy link

Thank you ;-)

@Anujndls
Copy link

Anujndls commented Jan 5, 2018

Thanks, this is nice demo i have used in my application which i need on urgent basis. Help me a-lot. :)

@EloneSampaio
Copy link

thanks

@felipefrer
Copy link

Thanks for sharing your knowledge my friend!!!

@AbdelhamedAbdin
Copy link

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