I am trying to place two labels and two inputs on the same line. Is this even possible?
I want it to look like this all on the same line:
[Label][Input][Button] WhiteSpace [Label2][Input2]
What I have so far
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
<input type="text" id="inputEmail" placeholder="Email">
<span class="input-group-btn ">
<button type="button" class="btn" data-ng-click="click()">...</button>
</span>
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Password</label>
<div class="controls">
<input type="password" id="inputPassword" placeholder="Password">
</div>
</div>
<div class="control-group">
<div class="controls">
<label class="checkbox">
<input type="checkbox"> Remember me
</label>
<button type="submit" class="btn">Sign in</button>
</div>
</div>
</form>
use Bootstrap form-inline & custom-control-inline classes.
<form class="form-horizontal">
<div class="form-inline">
<div class="control-group custom-control-inline">
<label class="col-sm-2 col-form-label" for="inputEmail">Email</label>
<div class="controls">
<input type="text" id="inputEmail" placeholder="Email" />
<span class="input-group-btn ">
<button type="button" class="btn" data-ng-click="click()">...</button>
</span>
</div>
</div>
<div class="control-group custom-control-inline">
<label class="control-label" for="inputPassword">Password</label>
<div class="controls">
<input type="password" id="inputPassword" placeholder="Password" />
</div>
</div>
<div class="control-group">
<div class="controls form-check-inline">
<label class="checkbox">
<input type="checkbox" />
Remember me
</label>
<button type="submit" class="btn">Sign in</button>
</div>
</div>
</div>
</form>