I want some of my elements to be horizontal on a line but my bootstrap skills are not enough for this.
<div class="tab-pane fade" id="create">
<div class="modal-header">
<h1 class="text-center" id="login-tit">Register</h1>
</div>
<form id="tab">
<div class="form-group">
<label class="reg-form-left">First Name</label>
<input type="text" class="form-control" >
</div><br />
<div class="form-group" style="margin-top:-22px;">
<label class="reg-form-left">Last Name</label>
<input type="text" value="" class="form-control">
</div>
<div class="form-group">
<label class="reg-form-left">Email</label>
<input type="text" value="" class="form-control">
</div>
<div class="form-group">
<label class="reg-form-left">Password</label>
<input type="text" value="" placeholder="6 - 20 characters" class="form-control">
</div>
<div class="form-group">
<label class="reg-form-left">Password again</label>
<input type="text" value="" class="form-control">
</div>
<div class="control-group">
<label class="reg-form-left control-label">Street/Nr</label>
<div class="controls-row">
<div class="controls col-sm-8">
<input type="text" value="" class="form-control">
</div>
<div class="controls col-sm-1">
<p style="font-size:24px;">/</p>
</div>
<div class="controls col-sm-3">
<input type="text" value="" class="form-control">
</div>
</div>
</div>
<div class="form-group col-xs-5">
<label class="reg-form-left">Postal code/City</label>
<input type="text" value="" class="form-control">
</div>
<div class="form-group col-xs-6">
<input type="text" value="" class="form-control">
</div>
<div class="register-btn">
<button class="btn btn-primary">Create Account</button>
</div>
</form>
</div>
I have this form:
But I want this:
It would be very nice if someone could help me to achieve what I want.
You need to know few things first -
col-*
attribute it adds default padding to the element. For alignments, you need to wrap your content inrow
first to avoid this issue.Here's the fix to the final few lines of your code