Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Bootstrap 3 - Login Form Example From:
<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=""
<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
<a href="#" class="pull-right need-help">Need help? </a><span class="clearfix"></span>
<a href="#" class="text-center new-account">Create an account </a>
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;
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);
color: #555;
font-size: 18px;
font-weight: 400;
display: block;
width: 96px;
height: 96px;
margin: 0 auto 10px;
display: block;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
margin-top: 10px;
display: block;
margin-top: 10px;
Copy link

Wojtechnology commented Mar 14, 2015

Thank you! Can I use this in my webapp?

Copy link

nderitu commented Mar 25, 2015

Nice one

Copy link

HRarsha commented May 31, 2015


Copy link

pedro-mass commented Aug 11, 2015

For the lazy, here's a codepen

Copy link

deivisonmoraes commented Aug 18, 2015



Copy link

dorianmouafo commented Aug 20, 2015


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'.

Copy link

AlayVora commented Dec 16, 2015

Thank You. It saved time and helped a lot

Copy link

Rana283 commented Feb 9, 2016

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

Copy link

dsp9898 commented May 14, 2016

Copy link

ywang04 commented May 14, 2016

thx a lot!

Copy link

ghost commented May 18, 2016

Muchas gracias 👍

Copy link

rizkynoor commented Jun 1, 2016

punteun pami preview na aya?

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.

Copy link

LuisHCK commented Aug 17, 2016

Gracias Amigo!
i use it in my app 💯

Copy link

exponent56 commented Aug 19, 2016

good work

Copy link

adm0442 commented Sep 5, 2016

server side code?

Copy link

NuNuYin commented Sep 21, 2016

Thank you ,Sir !

Copy link

msomi22 commented Nov 18, 2016


Copy link

glituma commented Dec 8, 2016

Gracias, mil gracias... lo utilice en + bootstrap

Copy link

ChuksFestus commented Dec 22, 2016

not bad

Copy link

Vilintritenmert commented Jan 19, 2017


Copy link

Hollyn commented Feb 13, 2017

Great! Thanks

Copy link

GaneshShetty951 commented Feb 20, 2017

Awesome Thanks...!

Copy link

Ramdharan commented Apr 17, 2017

Great work. Thank you.

Copy link

TomParris commented Jun 27, 2017

Thank you ;-)

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. :)

Copy link

EloneSampaio commented Feb 6, 2018


Copy link

felipefrer commented Mar 15, 2018

Thanks for sharing your knowledge my friend!!!

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