Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

I need to place multiple columns of inputs in single line like this:

What i need

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?

like image 310
suricactus Avatar asked May 10 '14 13:05

suricactus


2 Answers

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

like image 183
Zim Avatar answered Sep 24 '22 11:09

Zim


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.

like image 44
Sephy Avatar answered Sep 20 '22 11:09

Sephy