"Login & Signup forms in panel"
Bootstrap 3.1.0 Snippet by calvinko

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div id="loginbox" style="margin-top:50px;" class="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2"> <div class="panel panel-info" > <div class="panel-heading"> <div class="panel-title">Sign In</div> <div style="float:right; font-size: 80%; position: relative; top:-10px"><a href="#">Forgot password?</a></div> </div> <div style="padding-top:30px" class="panel-body" > <div style="display:none" id="login-alert" class="alert alert-danger col-sm-12"></div> <form id="loginform" class="form-horizontal" role="form"> <div style="margin-bottom: 25px" class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> <input id="login-username" type="text" class="form-control" name="username" value="" placeholder="username or email"> </div> <div style="margin-bottom: 25px" class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span> <input id="login-password" type="password" class="form-control" name="password" placeholder="password"> </div> <div class="input-group"> <div class="checkbox"> <label> <input id="login-remember" type="checkbox" name="remember" value="1"> Remember me </label> </div> </div> <div style="margin-top:10px" class="form-group"> <!-- Button --> <div class="col-sm-12 controls"> <a id="btn-login" href="#" class="btn btn-success">Login </a> <a id="btn-fblogin" href="#" class="btn btn-primary">Login with Facebook</a> </div> </div> <div class="form-group"> <div class="col-md-12 control"> <div style="border-top: 1px solid#888; padding-top:15px; font-size:85%" > Don't have an account! <a href="#" onClick="$('#loginbox').hide(); $('#signupbox').show()"> Sign Up Here </a> </div> </div> </div> </form> </div> </div> </div> <div id="signupbox" style="display:none; margin-top:50px" class="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2"> <div class="panel panel-info"> <div class="panel-heading"> <div class="panel-title">Sign Up</div> <div style="float:right; font-size: 85%; position: relative; top:-10px"><a id="signinlink" href="#" onclick="$('#signupbox').hide(); $('#loginbox').show()">Sign In</a></div> </div> <div class="panel-body" > <form id="signupform" class="form-horizontal" role="form"> <div id="signupalert" style="display:none" class="alert alert-danger"> <p>Error:</p> <span></span> </div> <div class="form-group"> <label for="email" class="col-md-3 control-label">Email</label> <div class="col-md-9"> <input type="text" class="form-control" name="email" placeholder="Email Address"> </div> </div> <div class="form-group"> <label for="firstname" class="col-md-3 control-label">First Name</label> <div class="col-md-9"> <input type="text" class="form-control" name="firstname" placeholder="First Name"> </div> </div> <div class="form-group"> <label for="lastname" class="col-md-3 control-label">Last Name</label> <div class="col-md-9"> <input type="text" class="form-control" name="lastname" placeholder="Last Name"> </div> </div> <div class="form-group"> <label for="password" class="col-md-3 control-label">Password</label> <div class="col-md-9"> <input type="password" class="form-control" name="passwd" placeholder="Password"> </div> </div> <div class="form-group"> <label for="icode" class="col-md-3 control-label">Invitation Code</label> <div class="col-md-9"> <input type="text" class="form-control" name="icode" placeholder=""> </div> </div> <div class="form-group"> <!-- Button --> <div class="col-md-offset-3 col-md-9"> <button id="btn-signup" type="button" class="btn btn-info"><i class="icon-hand-right"></i> &nbsp Sign Up</button> <span style="margin-left:8px;">or</span> </div> </div> <div style="border-top: 1px solid #999; padding-top:20px" class="form-group"> <div class="col-md-offset-3 col-md-9"> <button id="btn-fbsignup" type="button" class="btn btn-primary"><i class="icon-facebook"></i>   Sign Up with Facebook</button> </div> </div> </form> </div> </div> </div> </div>

Related: See More

Login and Register Modal
Signup form
login-form
Login Form

Questions / Comments:

Want a material design login and register page, then check out here
https://17chapters.blogspot...

It's just awesome

Saurabh Prakash () - 8 years ago - Reply 0

http://goo.gl/JjCcm7

halaachaba () - 8 years ago - Reply 0

what is the Invitation Code at the sign up?

Kwstas Lagoudakis () - 9 years ago - Reply 0

if we use your codes its not works properly. In your codes css and javascript files are not work. tell the solution... plz

zk saifi () - 9 years ago - Reply 0

this is nice

abc () - 9 years ago - Reply 0

Hi! is it free to use on my Website?

Asis () - 9 years ago - Reply 0

Yes, absolutely free! Enjoy!

maxsurguy () - 9 years ago - Reply 0

hello .. i have query !!
I want a 2 drop downs like .. City and area.
If both of them are chosen then only this panel must appear....... if both are not selected then panel must not appear .

Please help me .

Devansh Shrivastava () - 9 years ago - Reply 0

I have a weird problem. I have this on two different test sites. On the one site, it works no problem. On the other site, either it doesn't come up, or it comes up and disappears immediately. I am using the snippet in modals.

Kate Nagel () - 9 years ago - Reply 0

Very nice, thanks :)

Samuel Rivera () - 9 years ago - Reply 0

Hi, the onClick function doesn't work me. Should there be a JS / jQuery script included somewhere?

Kirill Zemlyanukhin () - 9 years ago - Reply 0

yes, Jquery is a requirement for the onclick event to work

angelxmoreno () - 9 years ago - Reply 0

Thanks so much!

Kirill Zemlyanukhin () - 9 years ago - Reply 0

You need Jquery anyway in order for bootstrap to work

sujay sreedhar () - 9 years ago - Reply 0

Hi, I have just started using bootstrap and have tried to use this log in and sign up form. I have used a fade modal and it works for the log in form but when i try to click through to the sign up form the log in box goes but the sign up form does not load. have i left something out of this line .

joe () - 9 years ago - Reply 0

Hi Joe,

I've just been doing something similar and saw your comment. I changed my code as follows (Note that I've changed the names of the modals):

Change:

onClick="$('#loginbox').hide(); $('#signupbox').show()"

To:

onClick="$('#loginModal').modal('hide'); $('#signupModal').modal('show')"

Assuming you've changed all the panels to modals correctly this should work just fine

B.

properOrder () - 9 years ago - Reply 0

Hi properOrder, thanks for sharing, I tried to use the code as you explained but I'm seeing Sign In and Sign Up panel one after the other at the same time both are appearing on screen.

Pawan Pareek () - 7 years ago - Reply 0

It seems that does' work with IE 11, is it possible?

Nico () - 9 years ago - Reply 0

schibidu & tralala'

hä? () - 10 years ago - Reply 0

When i launch in a browser, the interface looks plain, and not how it should? anyone know how to resolve this?

Ella () - 10 years ago - Reply 0

do you have bootstrap css + js already on the page?

angelxmoreno () - 9 years ago - Reply 0

Where is forgot password form?

Sushan () - 10 years ago - Reply 0

you can search the various forgot password snippets on the site

angelxmoreno () - 9 years ago - Reply 0

What I don't get it is where are all the colours of the themes? What if I want to choose "Amelia" over "Plain Bootstrap"? There isn't any color attributes in style tags.

Teuvo Jääskeläinen () - 10 years ago - Reply 0

that is a feature of bootstrap. Those themes override the existing CSS classes

angelxmoreno () - 9 years ago - Reply 0

You can get the themes from bootswatch.com

maxsurguy () - 10 years ago - Reply 0

i need a glass login and registation forms for my project so, help me

Vinod () - 10 years ago - Reply 0

Just a minor issue with icons not displaying. Nice work! Thanks!

Germán () - 10 years ago - Reply 0

Hello,
The validation part is missing in this demo.If i have customized the validation it is showing abnormal alignment.Can you please help this?

Mohanraj M () - 10 years ago - Reply 0

It is not missing, it is simply not included. This is a snippet, not a full fledge solution. You will have to code that part yourself for now.

angelxmoreno () - 9 years ago - Reply 0

Thanks! Works perfectly with bootstrap. Nicely done.

Steller () - 10 years ago - Reply 0

Hello, How do I set that the sign-up form shows first? Thanks.

Manolo HK () - 10 years ago - Reply 0

change the "display:none" style from the signup to the register and remove it from signup.
take a look at http://bootsnipp.com/user/s...

angelxmoreno () - 9 years ago - Reply 0

What everyone wants to know, is where is the CSS file with all of the styles? Well if you actually read the html you would know. The author of this code put his styles in a style tag, not in a separate CSS file. The styles are all there people, just look through the code!

Matt () - 10 years ago - Reply 0

This site is called BootSnipp. It is where you can find snippets of html/css/js code for your Bootstrap projects. Bootstrap is a requirement for all snippets on this site. Install Bootstrap. That is where the CSS lives.

angelxmoreno () - 9 years ago - Reply 0

will this template work with bootstrap 3.2?

morfeo () - 10 years ago - Reply 0

I don't see why it wouldn't work!

maxsurguy () - 10 years ago - Reply 0

adding to the initial question....any CSS for this snippet?!? Looks great on this site, but where's the CSS code? Is it just using Bootstrap CSS?

peachysuz () - 10 years ago - Reply 0

You just need Bootstap CSS that you can download at http://getbootstrap.com

maxsurguy () - 10 years ago - Reply 0

Where to get the CSS for it. When i try to run it, its doesn't show the css content. What link should I put in the css href

Sagar () - 10 years ago - Reply 0

You just need Bootstap CSS that you can download at http://getbootstrap.com. Please get it there.

maxsurguy () - 10 years ago - Reply 0

Hello, it may be that Kaspersky Internet Security blocks access to my php code containing this snippet? I tried with others and do not give me problems.

Destino () - 10 years ago - Reply 0

What PHP code???

maxsurguy () - 10 years ago - Reply 0

Good. Guess not been well explained. Fails with this code snippet, and obviously I put the comment here. Just that I have it in a php file and I run php code there. The fact is that with this code login code antivirus does not let see the page.

Destino () - 10 years ago - Reply 0

dude, you are VERY confused. This has nothing to do with PHP what-so-ever.

angelxmoreno () - 9 years ago - Reply 0

that's so weird because there's nothing security related in the code snippet itself, maybe your antivirus doesn't allow displaying any localhost PHP pages? In that case you have to disable the antivirus for localhost domain.

maxsurguy () - 10 years ago - Reply 0