Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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;
}
@Wojtechnology
Copy link

Wojtechnology commented Mar 14, 2015

Thank you! Can I use this in my webapp?

@nderitu
Copy link

nderitu commented Mar 25, 2015

Nice one

@HRarsha
Copy link

HRarsha commented May 31, 2015

Thanks!

@pedro-mass
Copy link

pedro-mass commented Aug 11, 2015

For the lazy, here's a codepen

http://codepen.io/anon/pen/gpEJdQ

@deivisonmoraes
Copy link

deivisonmoraes commented Aug 18, 2015

Nice!

Tks!

@dorianmouafo
Copy link

dorianmouafo commented Aug 20, 2015

Thanks!

@bluetea55z
Copy link

bluetea55z commented Sep 20, 2015

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

AlayVora commented Dec 16, 2015

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

rizkynoor commented Jun 1, 2016

punteun pami preview na aya?

@cancerian0684
Copy link

cancerian0684 commented Jun 5, 2016

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

exponent56 commented Aug 19, 2016

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

ChuksFestus commented Dec 22, 2016

not bad

@Vilintritenmert
Copy link

Vilintritenmert commented Jan 19, 2017

perfect

@Hollyn
Copy link

Hollyn commented Feb 13, 2017

Great! Thanks

@GaneshShetty951
Copy link

GaneshShetty951 commented Feb 20, 2017

Awesome Thanks...!

@Ramdharan
Copy link

Ramdharan commented Apr 17, 2017

Great work. Thank you.

@TomParris
Copy link

TomParris commented Jun 27, 2017

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

EloneSampaio commented Feb 6, 2018

thanks

@felipefrer
Copy link

felipefrer commented Mar 15, 2018

Thanks for sharing your knowledge my friend!!!

@AbdelhamedAbdin
Copy link

AbdelhamedAbdin commented Feb 11, 2020

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