EmVee EmVee - 7 months ago 127
HTML Question

How to have two-column registration form in bootstrap 3?

I am trying to have two-column registration form using bootstrap 3, other pages of my website are fine except the registration page. My input fields and labels scattered all over the screen on the right side because I am using

col-md-6
for to divide the page into two. The page looks like this now.



As you can see, the right side is idk, they are scattered. How to fix this side? My code is something like this in both sides:

<div class="container">
<div class="row">
<!-- start code on the left side of the page -->
<div class="col-md-6">
<div class="form-group">
<label class="col-sm-3 control-label"><font color="red"><b>*</b></font> First Name</label>
<div class="col-sm-6">
<input type="text" class="form-control" name="firstname" id="firstname"
placeholder="Firstname" onKeyPress="return ValidateAlpha(event);" onblur="toUpper(this.value, this.id);"/>
</div>
</div>
</div>
<!-- left code ends here -->

<!-- start code on the right side of the page -->
<div class="col-md-6">
<div class="form-group">
<label class="col-sm-3 control-label"><font color="red"><b>*</b></font> E-mail</label>
<div class="col-sm-5 ">
<input type="text" class="form-control" name="email" id="email" placeholder= "email"
ondrop="return false;" onpaste="return false;" /></span>
</div>
</div>
</div>
<!-- right code ends here -->
</div>
</div>

Answer

Look at the codepen I've made for you http://codepen.io/creativemind1/pen/QNYqqN

Kindly remove the !important from the css and make changes in your style.css

EDIT: You are not suppose to give any classes in label and <div class="col-md-6"> before input as it will automatically align for you.