CODEWITHSUNDEEP
twitter-bootstrap
user2088016
user2088016

Reputation: 99

label and text field on same line

Can someone take a look at the sample and help me to make label and input fields forizontal? Currently it is label and below it input fild. I need label:input field.

http://jsfiddle.net/dUG4f/4/

    <div class="row">
        <div class="col-xs-6">
                    <div class="panel panel-primary">
                         <div class="panel-heading"><h3 class="panel-title">Application Information</h3></div>
                         <div class="panel-body">

                                <div class="row">
                                <div class="col-lg-6 col-lg-6">
                                   <div class ="form-group">
                                        <label for="text" >Contract State</label>       
                                        <div class="input-group">    
                                            <select name="State" id="State" class="validate[required] form-control">
                                            <option value="">Choose a State</option>                    
                                            <option value="IL">Illinois</option>
                                            <option value="MN">Minnesota</option>
                                            <option value="WI">Wisconsin</option>
                                            </select>                                                       
                                        </div>
                                    </div>

                                    <div class ="form-group">
                                        <label for="text" >Application Number</label>       
                                         <div class="input-group">   
                                        <input  class="validate[required] text-input form-control" type="text" name="AppNumber" id="AppNumber" />                                           
                                        </div>   
                                    </div>                                      


                             </div> <!-- col-lg-6 col close -->
                            </div> <!-- row close -->
                         </div> <!--  End of panel Body -->     
                    </div><!--  End of panel  -->       
                </div> <!-- end col-xs-6 -->

How can I align labels righ and controls left with margin gap in between?

enter image description here

Upvotes: 3

Views: 17632

Answers (3)

AndrewL64
AndrewL64

Reputation: 16311

Just wrap your form-group in a form-inline class like this:

<form class="form-inline">
  <div class ="form-group">
    <label for="text" >Application Number</label>       
      <div class="input-group">   
        <input  class="validate[required] text-input form-control" type="text" name="AppNumber" id="AppNumber" />                                           
      </div>   
  </div>
</form>

P.S. the form-inline wrapper doesn't necessarily need to be a form tag so you can use a div tag too.

Upvotes: 4

angel_navarro
angel_navarro

Reputation: 1777

You have multiple solutions for you matter. For example:

<div style="width: 200px; float: left;">
    <label for="text">Application Number:</label>
</div>    
<div class="input-group" style="float:left;">   
    <input  class="validate[required] text-input form-control" type="text" name="AppNumber" id="AppNumber" />                                           
</div>

To multiple rows, it can be something like this:

<div style="width: 200px; float: left;">
    <label for="text">Field 1:</label>
</div>    
<div class="input-group" style="float:left;">   
    <input  class="validate[required] text-input form-control" type="text" name="AppNumber" id="AppNumber" />                                           
</div> 
<div style="clear:both;">&nbsp;</div>

<div style="width: 200px; float: left;">
    <label for="text">Field 2:</label>
</div>    
<div class="input-group" style="float:left;">   
    <input  class="validate[required] text-input form-control" type="text" name="AppNumber" id="AppNumber" />                                           
</div> 
<div style="clear:both;">&nbsp;</div>

<div style="width: 200px; float: left;">
    <label for="text">Field 3:</label>
</div>    
<div class="input-group" style="float:left;">   
    <input  class="validate[required] text-input form-control" type="text" name="AppNumber" id="AppNumber" />                                           
</div> 
<div style="clear:both;">&nbsp;</div>

Upvotes: 0

Sumit Raghav
Sumit Raghav

Reputation: 630

add class in label and give style: float left

<div class ="form-group">
     <label for="text" style="float:left;margin-right:5px;">Application Number</label>       
     <div class="input-group">   
     <input  class="validate[required] text-input form-control" type="text" name="AppNumber" id="AppNumber" />                                           
     </div>   
     </div>

Upvotes: 4

Related Questions