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

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

commented Jun 9, 2014

Great form, Thank you!

@kinow

This comment has been minimized.

Copy link

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

commented Jun 27, 2014

Demo ?

@ilyasmuyiwa

This comment has been minimized.

Copy link

commented Jul 1, 2014

Demo?

@esbanarango

This comment has been minimized.

Copy link

commented Jul 3, 2014

@nikolamin

This comment has been minimized.

Copy link

commented Aug 5, 2014

the best one (Y)

@JuanBonnett

This comment has been minimized.

Copy link

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

commented Aug 14, 2014

nice form tanx

@MonrealRyan

This comment has been minimized.

Copy link

commented Aug 20, 2014

Thanks Alot.. ^_^

@JanjaDevTeam

This comment has been minimized.

Copy link

commented Aug 26, 2014

Thank you sir!

@luispinto23

This comment has been minimized.

Copy link

commented Aug 27, 2014

Thank you indeed. Very clean form.

@anuragphadke19

This comment has been minimized.

Copy link

commented Oct 20, 2014

This is amazing. Thanks a lot for this.

@nemoo

This comment has been minimized.

Copy link

commented Oct 31, 2014

just works. excellent!

@lekhnath

This comment has been minimized.

Copy link

commented Nov 11, 2014

nice

@jwebcat

This comment has been minimized.

Copy link

commented Dec 3, 2014

awesome 🐱 😺 thanks!

@elvishp2006

This comment has been minimized.

Copy link

commented Dec 11, 2014

very nice tks

@japharr

This comment has been minimized.

Copy link

commented Dec 23, 2014

Awesome 🐱 😺 thanks!

@bwiens

This comment has been minimized.

Copy link

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

commented Mar 14, 2015

Thank you! Can I use this in my webapp?

@nderitu

This comment has been minimized.

Copy link

commented Mar 25, 2015

Nice one

@HRarsha

This comment has been minimized.

Copy link

commented May 31, 2015

Thanks!

@pedro-mass

This comment has been minimized.

Copy link

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

commented Aug 18, 2015

Nice!

Tks!

@dorianmouafo

This comment has been minimized.

Copy link

commented Aug 20, 2015

Thanks!

@bluetea55z

This comment has been minimized.

Copy link

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

commented Dec 16, 2015

Thank You. It saved time and helped a lot

@Rana283

This comment has been minimized.

Copy link

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

commented May 14, 2016

thx a lot!

@ghost

This comment has been minimized.

Copy link

commented May 18, 2016

Muchas gracias 👍

@rizkynoor

This comment has been minimized.

Copy link

commented Jun 1, 2016

punteun pami preview na aya?

@cancerian0684

This comment has been minimized.

Copy link

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

commented Aug 17, 2016

Gracias Amigo!
i use it in my app 💯

@exponent56

This comment has been minimized.

Copy link

commented Aug 19, 2016

good work

@adm0442

This comment has been minimized.

Copy link

commented Sep 5, 2016

server side code?

@NuNuYin

This comment has been minimized.

Copy link

commented Sep 21, 2016

Thank you ,Sir !

@msomi22

This comment has been minimized.

Copy link

commented Nov 18, 2016

Good

@glituma

This comment has been minimized.

Copy link

commented Dec 8, 2016

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

@ChuksFestus

This comment has been minimized.

Copy link

commented Dec 22, 2016

not bad

@Vilintritenmert

This comment has been minimized.

Copy link

commented Jan 19, 2017

perfect

@Hollyn

This comment has been minimized.

Copy link

commented Feb 13, 2017

Great! Thanks

@GaneshShetty951

This comment has been minimized.

Copy link

commented Feb 20, 2017

Awesome Thanks...!

@Ramdharan

This comment has been minimized.

Copy link

commented Apr 17, 2017

Great work. Thank you.

@TomParris

This comment has been minimized.

Copy link

commented Jun 27, 2017

Thank you ;-)

@Anujndls

This comment has been minimized.

Copy link

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

commented Feb 6, 2018

thanks

@felipefrer

This comment has been minimized.

Copy link

commented Mar 15, 2018

Thanks for sharing your knowledge my friend!!!

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.