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;
}
@dorianmouafo
Copy link

Thanks!

@bluetea55z
Copy link

I am not sure when this started happening, but does anyone else notice that the 'Remember me' checkbox falls outside of the 'form-signin' div in the latest version of bootstrap. What is the best way to fix this following bootstrap standards? Please see the jsfiddle link in the above post which is using the latest version of bootstrap. The only temporary fix that I could temporarily come up with is adding the following style which I know is incorrect 'checkbox checkbox-inline pull-left'.

@AlayVora
Copy link

Thank You. It saved time and helped a lot

@Rana283
Copy link

Rana283 commented Feb 9, 2016

thanks yar ....its saved my time great keep posting

@dsp9898
Copy link

dsp9898 commented May 14, 2016

@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