"Parallel Signin and Signup"
Bootstrap 2.3.2 Snippet by msurguy

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/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 class="row-fluid"> <div class="span12"> <div class="span6"> <div class="area"> <form class="form-horizontal"> <div class="heading"> <h4 class="form-heading">Sign In</h4> </div> <div class="control-group"> <label class="control-label" for= "inputCompanyName">Company Name</label> <div class="controls"> <input id="inputCompanyName" placeholder= "E.g. Some Software Pvt. Ltd." type="text"> </div> </div> <div class="control-group"> <label class="control-label" for= "inputUsername">Username</label> <div class="controls"> <input id="inputUsername" placeholder= "E.g. ashwinhegde" type="text"> </div> </div> <div class="control-group"> <label class="control-label" for= "inputPassword">Password</label> <div class="controls"> <input id="inputPassword" placeholder= "Min. 8 Characters" type="password"> </div> </div> <div class="control-group"> <div class="controls"> <label class="checkbox"><input type="checkbox"> Keep me signed in ¦ <a class="btn btn-link" href="#">Forgot my password</a></label> <button class="btn btn-success" type= "submit">Sign In</button> <button class="btn" type="button">Help</button> </div> </div> <div class="alert alert-error"> <button class="close" data-dismiss="alert" type= "button">×</button> <strong>Access Denied!</strong> Please provide valid authorization. </div> </form> </div> </div> <div class="span6"> <div class="area"> <form class="form-horizontal"> <div class="heading"> <h4 class="form-heading">Sign Up</h4> </div> <div class="control-group"> <label class="control-label" for= "inputCompanyName">Company Name</label> <div class="controls"> <input id="inputCompanyName" placeholder= "E.g. Some Software Pvt. Ltd." type="text"> </div> </div> <div class="control-group"> <label class="control-label" for="inputFirst">First Name</label> <div class="controls"> <input id="inputFirst" placeholder= "E.g. Ashwin" type="text"> </div> </div> <div class="control-group"> <label class="control-label" for="inputLast">Last Name</label> <div class="controls"> <input id="inputLast" placeholder="E.g. Hegde" type="text"> </div> </div> <div class="control-group"> <label class="control-label" for= "inputEmail">Email</label> <div class="controls"> <input id="inputEmail" placeholder= "E.g. ashwinh@cybage.com" type="text"> </div> </div> <div class="control-group"> <label class="control-label" for= "inputUser">Username</label> <div class="controls"> <input id="inputUser" placeholder= "E.g. ashwinhegde" type="text"> </div> </div> <div class="control-group"> <label class="control-label" for= "inputPassword">Password</label> <div class="controls"> <input id="inputPassword" placeholder= "Min. 8 Characters" type="password"> </div> </div> <div class="control-group"> <div class="controls"> <label class="checkbox"><input type="checkbox"> I agree all your <a href="#">Terms of Services</a></label> <button class= "btn btn-success" type="submit">Sign Up</button> <button class="btn" type= "button">Help</button> </div> </div> <div class="alert alert-info"> <button class="close" data-dismiss="alert" type= "button">×</button> <strong>Confirmation:</strong> A confirmation email has been sent to your email.<br> Thank you for your registration. </div> </form> </div> </div> </div> </div> </div>

Related: See More


Questions / Comments:

This seems to be missing the CSS, i have bootstrap.css and this html is not working with it.

Nick (0) - 4 years ago - Reply 0


yes , thanks you. I'm 0 level at css but with you and bootstrap, it looks like I have did css for long time thanks. But do you have tutorials about all concerning ecommerce: grid articles ,design article, pagination, infinite scroll and others utilities with Boostrap? thanks

Antony Adopo (0) - 4 years ago - Reply 0


Beautiful!

Steven Chan (0) - 4 years ago - Reply 0


What PHP file would I need to past the code in to?

Mark (0) - 4 years ago - Reply 0


You would need to make a web application first. If you don't know how to do that, I highly suggest you take my course on Udemy : http://udemy.com/develop-we...

maxsurguy (0) - 4 years ago - Reply 0


How do you increase the width of the label before the input field?

MattGr (0) - 4 years ago - Reply 0


cool thanks

Mikele (0) - 5 years ago - Reply 0


Very nice.

carlosspohr (0) - 5 years ago - Reply 0


Just a heads up: both company and password text inputs share the same ID. This breaks both the accessibility of the corresponding form labels and potentially your JS as well.

psobko (0) - 5 years ago - Reply 0


Its just copy paste type! you can do that change
Thanks for pointing out.

Ashwin Hegde (0) - 5 years ago - Reply 0


I tried to copy the above markup to my web page and it does not show side by side. It is showing one below the other and not exactly below. Any would be greatly appreciated. Thank you!

Bhagavan krishna (0) - 5 years ago - Reply 0


You're welcome. The layout was not for responsive anyways you can add responsive css provided by bootstrap and its just working fine on my browser.

Ashwin Hegde (0) - 5 years ago - Reply 0