Clever Geek Handbook

Aligning bootstrap input fields

I have below code

<form id="editProfileForm" class="form-horizontal span8"  method="post">  
    <div class="control-group">
        <label class="control-label" for="inputSubject">Subject</label>
        <div class="controls">
            <input type="text" id="inputSubject" class="span8" >
        </div>
    </div>

    <div class="control-group">
        <label class="control-label" for="inputTags">Tags</label>
        <div class="controls">                            
            <input type="text" id="inputTags" class="span3">  
        </div>        
    </div> 

    <div class="control-group">
        <label class="control-label" for="inputAccess">access</label>
        <div class="controls">                            
            <input type="text" id="inputAccess" class="span3">  
        </div>        
    </div>

I am getting the form as shown below enter image description here

Can someone please tell me how to approach below? Thank you for your help.

enter image description here

JS Fiddle link http://jsfiddle.net/kLuB3/331/

+3


source to share


1 answer


form-inline

better suited for this than form-horizontal

.

Try the following:

<form id="editProfileForm" class="span8 form-inline" method="post">
    <div class="row">
        <label class="span1" for="inputSubject">Subject</label>
        <input type="text" id="inputSubject" class="span7">
    </div>
    <div class="row">
        <label class="span1" for="inputTags">Tags</label>
        <input type="text" id="inputTags" class="span3">
        <label class="span1" for="inputAccess" id="inputAccessLabel">access</label>
        <input type="text"id="inputAccess" class="span3">
    </div>
</form>


With this CSS:

#inputTags, #inputAccess {
    float: left !important;
}
#inputAccessLabel {
    margin-left: 35px;
    margin-right: 5px;
}

jsFiddle

+5


source






More articles:


All Articles