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;
}
@cjohnweb

This comment has been minimized.

Copy link

@cjohnweb cjohnweb commented May 30, 2014

This looks amazing. I had no issues just copying this into an HTML document with bootstrap 3 and getting it to work. Thank you!

@arvindrk

This comment has been minimized.

Copy link

@arvindrk arvindrk commented Jun 9, 2014

Great form, Thank you!

@kinow

This comment has been minimized.

Copy link

@kinow kinow commented Jun 11, 2014

What sorcery is this?

Thanks! Probably going to use it in nestor-qa.org log in form. Would you have any license or requirement for use?

@David36

This comment has been minimized.

Copy link

@David36 David36 commented Jun 27, 2014

Demo ?

@ilyasmuyiwa

This comment has been minimized.

Copy link

@ilyasmuyiwa ilyasmuyiwa commented Jul 1, 2014

Demo?

@esbanarango

This comment has been minimized.

Copy link

@esbanarango esbanarango commented Jul 3, 2014

@nikolamin

This comment has been minimized.

Copy link

@nikolamin nikolamin commented Aug 5, 2014

the best one (Y)

@JuanBonnett

This comment has been minimized.

Copy link

@JuanBonnett JuanBonnett commented Aug 12, 2014

Thank you! I'm gonna use it so the users see a pertty form when login in the application I'm developing. THANKS!

@mffazlan

This comment has been minimized.

Copy link

@mffazlan mffazlan commented Aug 14, 2014

nice form tanx

@MonrealRyan

This comment has been minimized.

Copy link

@MonrealRyan MonrealRyan commented Aug 20, 2014

Thanks Alot.. ^_^

@JanjaDevTeam

This comment has been minimized.

Copy link

@JanjaDevTeam JanjaDevTeam commented Aug 26, 2014

Thank you sir!

@luispinto23

This comment has been minimized.

Copy link

@luispinto23 luispinto23 commented Aug 27, 2014

Thank you indeed. Very clean form.

@anuragphadke19

This comment has been minimized.

Copy link

@anuragphadke19 anuragphadke19 commented Oct 20, 2014

This is amazing. Thanks a lot for this.

@nemoo

This comment has been minimized.

Copy link

@nemoo nemoo commented Oct 31, 2014

just works. excellent!

@lekhnath

This comment has been minimized.

Copy link

@lekhnath lekhnath commented Nov 11, 2014

nice

@jwebcat

This comment has been minimized.

Copy link

@jwebcat jwebcat commented Dec 3, 2014

awesome 🐱 😺 thanks!

@elvishp2006

This comment has been minimized.

Copy link

@elvishp2006 elvishp2006 commented Dec 11, 2014

very nice tks

@japharr

This comment has been minimized.

Copy link

@japharr japharr commented Dec 23, 2014

Awesome 🐱 😺 thanks!

@bwiens

This comment has been minimized.

Copy link

@bwiens bwiens commented Dec 24, 2014

In order for this to be full-width on mobile, I recommend adding <meta name="viewport" content="width=device-width, initial-scale=1"> to the header. I would also change col-sm-6 col-md-4 col-md-offset-4 to col-xs-12 col-md-4 col-md-offset-4 so that it's not zoomed out at 50% but at 100% width.

@Wojtechnology

This comment has been minimized.

Copy link

@Wojtechnology Wojtechnology commented Mar 14, 2015

Thank you! Can I use this in my webapp?

@nderitu

This comment has been minimized.

Copy link

@nderitu nderitu commented Mar 25, 2015

Nice one

@HRarsha

This comment has been minimized.

Copy link

@HRarsha HRarsha commented May 31, 2015

Thanks!

@pedro-mass

This comment has been minimized.

Copy link

@pedro-mass pedro-mass commented Aug 11, 2015

For the lazy, here's a codepen

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

@deivisonmoraes

This comment has been minimized.

Copy link

@deivisonmoraes deivisonmoraes commented Aug 18, 2015

Nice!

Tks!

@dorianmouafo

This comment has been minimized.

Copy link

@dorianmouafo dorianmouafo commented Aug 20, 2015

Thanks!

@bluetea55z

This comment has been minimized.

Copy link

@bluetea55z 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

This comment has been minimized.

Copy link

@AlayVora AlayVora commented Dec 16, 2015

Thank You. It saved time and helped a lot

@Rana283

This comment has been minimized.

Copy link

@Rana283 Rana283 commented Feb 9, 2016

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

@dsp9898

This comment has been minimized.

@ywang04

This comment has been minimized.

Copy link

@ywang04 ywang04 commented May 14, 2016

thx a lot!

@ghost

This comment has been minimized.

Copy link

@ghost ghost commented May 18, 2016

Muchas gracias 👍

@rizkynoor

This comment has been minimized.

Copy link

@rizkynoor rizkynoor commented Jun 1, 2016

punteun pami preview na aya?

@cancerian0684

This comment has been minimized.

Copy link

@cancerian0684 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

This comment has been minimized.

Copy link

@LuisHCK LuisHCK commented Aug 17, 2016

Gracias Amigo!
i use it in my app 💯

@exponent56

This comment has been minimized.

Copy link

@exponent56 exponent56 commented Aug 19, 2016

good work

@adm0442

This comment has been minimized.

Copy link

@adm0442 adm0442 commented Sep 5, 2016

server side code?

@NuNuYin

This comment has been minimized.

Copy link

@NuNuYin NuNuYin commented Sep 21, 2016

Thank you ,Sir !

@msomi22

This comment has been minimized.

Copy link

@msomi22 msomi22 commented Nov 18, 2016

Good

@glituma

This comment has been minimized.

Copy link

@glituma glituma commented Dec 8, 2016

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

@ChuksFestus

This comment has been minimized.

Copy link

@ChuksFestus ChuksFestus commented Dec 22, 2016

not bad

@Vilintritenmert

This comment has been minimized.

Copy link

@Vilintritenmert Vilintritenmert commented Jan 19, 2017

perfect

@Hollyn

This comment has been minimized.

Copy link

@Hollyn Hollyn commented Feb 13, 2017

Great! Thanks

@GaneshShetty951

This comment has been minimized.

Copy link

@GaneshShetty951 GaneshShetty951 commented Feb 20, 2017

Awesome Thanks...!

@Ramdharan

This comment has been minimized.

Copy link

@Ramdharan Ramdharan commented Apr 17, 2017

Great work. Thank you.

@TomParris

This comment has been minimized.

Copy link

@TomParris TomParris commented Jun 27, 2017

Thank you ;-)

@Anujndls

This comment has been minimized.

Copy link

@Anujndls 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

This comment has been minimized.

Copy link

@EloneSampaio EloneSampaio commented Feb 6, 2018

thanks

@felipefrer

This comment has been minimized.

Copy link

@felipefrer felipefrer commented Mar 15, 2018

Thanks for sharing your knowledge my friend!!!

@AbdelhamedAbdin

This comment has been minimized.

Copy link

@AbdelhamedAbdin 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
You can’t perform that action at this time.