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. ``` Quarter Address Addr. № Block name/Number Entrance Floor Apartament ``` So is it possible to have multiple `form-group`'s for…

To align easily things in bootstrap 3, You should use the Grid System. Here is a fiddle close to your needs : ``` Quarter Address Addr. № Block name/Number Entrance Floor Apartament ``` 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.

Twitter bootstrap 3 form-horizontal and multiple input columns on single line

css, twitter-bootstrap-3

Solution

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.

Problem

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?

Original source