Menu
I need to place multiple columns of inputs in single line like this:
I did this by grouping multiple inputs in single form-group, but this way I can't use has-error class.
<div class="form-group">
<label class="control-label col-sm-4">Quarter</label>
<input type="text" class="col-sm-20" />
</div>
<div class="form-group">
<label class="control-label col-sm-4">Address</label>
<input type="text" class="col-sm-15" />
<label class="control-label col-sm-2">Addr. №</label>
<input type="text" class="col-sm-3" />
</div>
<div class="form-group">
<label class="control-label col-sm-4">Block name/Number</label>
<input type="text" class="col-sm-5" />
<label class="control-label col-sm-2">Entrance</label>
<input type="text" class="col-sm-3" />
<label class="control-label col-sm-2">Floor</label>
<input type="text" class="col-sm-3" />
<label class="control-label col-sm-2">Apartament</label>
<input type="text" class="col-sm-3" />
</div>
So is it possible to have multiple form-group's for each input box?
310
You need to wrap the inputs in their own col-* classes like this..
<form class="form-horizontal"> <div class="form-group"> <label class="control-label col-sm-2">Quarter</label> <div class="col-md-10"> <input type="text" class="form-control"> </div> </div> <div class="form-group"> <label class="control-label col-sm-2">Address</label> <div class="col-md-8"> <input type="text" class="form-control"> </div> <label class="control-label col-sm-1">Addr. №</label> <div class="col-md-1"> <input type="text" class="form-control"> </div> </div> <div class="form-group"> <label class="control-label col-sm-2">Block name/Number</label> <div class="col-md-4"> <input type="text" class="form-control"> </div> <label class="control-label col-sm-1">Entrance</label> <div class="col-md-1"> <input type="text" class="form-control"> </div> <label class="control-label col-sm-1">Floor</label> <div class="col-md-1"> <input type="text" class="form-control"> </div> <label class="control-label col-sm-1">Apartment</label> <div class="col-md-1"> <input type="text" class="form-control"> </div> </div> </form> Demo
Also, there is no col-sm-15 or col-sm-20 in Bootstrap
183
To align easily things in bootstrap 3, You should use the Grid System.
Here is a fiddle close to your needs :
<body>
<form class="form-horizontal">
<div class="row">
<div class="form-group">
<label class="col-sm-2">Quarter</label>
<div class="col-sm-10"><input type="text" class="form-control" /></div>
</div>
</div>
<div class="row">
<div class="form-group">
<label class="col-sm-2">Address</label>
<div class="col-sm-5"><input type="text" class="form-control" /></div>
</div>
<div class="form-group">
<label class="col-sm-2">Addr. №</label>
<div class="col-sm-3"><input type="text" class="form-control" /></div>
</div>
</div>
<div class="row">
<div class="form-group">
<label class="col-sm-2">Block name/Number</label>
<div class="col-sm-1"><input type="text" class="form-control" /></div>
</div>
<div class="form-group">
<label class="col-sm-1">Entrance</label>
<div class="col-sm-1"><input type="text" class="form-control" /></div>
</div>
<div class="form-group">
<label class="col-sm-1">Floor</label>
<div class="col-sm-1"><input type="text" class="form-control" /></div>
</div>
<div class="form-group">
<label class="col-sm-2">Apartament</label>
<div class="col-sm-3"><input type="text" class="form-control" /></div>
</div>
</div>
</form>
</body>
The alignment depends on the width of the screen so be sure to tune it properly to your needs. Then you can style the inputs themselves.
44
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
