Bootstrap alignment of input fields

Question

I am really new to Bootstrap and when it comes to Front End development I am pretty useless. To write the backend was easy but I am stuck for hours now trying to come up with a decent input form. I have a modal box (see code below) which currently appears in the form of (check img here http://tinypic.com/r/290wk6v/8)

On the image (link above) the input fields are not aligned. Since I am going to have more then 15 input fields, I would like to achieve something like this http://tinypic.com/r/142x69y/8 , or maybe to have three rows of fields. If any of you is front end guy can you please tell how I could tackle this. I've looked over the w3school and their tut related to bootstrap forms but I am even more confused now...

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<div id="addContactsModal"
     class="modal hide fade in centering insertAndUpdateDialogs"
     role="dialog"
     aria-labelledby="addContactsModalLabel"
     aria-hidden="true">
    <div class="modal-header">
        <h3 id="addContactsModalLabel" class="displayInLine">
            <spring:message code="create"/>&nbsp;<spring:message code="purchaseOrder"/>
        </h3>
    </div>
    <div class="modal-body">
        <form name="newContactForm" novalidate >
            <div class="pull-left">
                <div>
                    <div class="input-append">
                        <label>* <spring:message code="tower.name"/>:</label>
                    </div>
                    <div class="input-append">
                        <input type="text"
                               required
                               autofocus
                               ng-model="contact.tower"
                               name="tower"
                               placeholder="<spring:message code='contact'/>&nbsp;<spring:message code='contacts.name'/>"/>
                    </div>
                    <div class="input-append">
                        <label>
                                <span class="alert alert-error"
                                      ng-show="displayValidationError && newContactForm.name.$error.required">
                                        <spring:message code="required"/>
                                </span>
                        </label>
                    </div>
                </div>
                <div>
                    <div class="input-append">
                        <label>* <spring:message code="requestid.name"/>:</label>
                    </div>
                    <div class="input-append">
                        <input type="text"
                               required
                               ng-model="contact.requestid"
                               name="email"
                               placeholder="<spring:message code='sample.requestid'/> "/>
                    </div>
                    <div class="input-append">
                        <label>
                                <span class="alert alert-error"
                                      ng-show="displayValidationError && newContactForm.email.$error.required">
                                    <spring:message code="required"/>
                                </span>
                        </label>
                    </div>
                </div>

                <div>
                    <div class="input-append">
                        <label>* <spring:message code="poid.name"/>:</label>
                    </div>
                    <div class="input-append">
                        <input type="text"
                               required
                               ng-model="contact.poid"
                               name="phoneNumber"
                               placeholder="<spring:message code='sample.poid'/> "/>
                    </div>
                    <div class="input-append">
                        <label>
                                <span class="alert alert-error"
                                      ng-show="displayValidationError && newContactForm.phoneNumber.$error.required">
                                    <spring:message code="required"/>
                                </span>
                        </label>
                    </div>
                </div>

                <input type="submit"
                       class="btn btn-inverse"
                       ng-click="createContact(newContactForm);"
                       value='<spring:message code="create"/>'/>
                <button class="btn btn-inverse"
                        data-dismiss="modal"
                        ng-click="exit('#addContactsModal');"
                        aria-hidden="true">
                    <spring:message code="cancel"/>
                </button>
            </div>
        </form>
    </div>
    <span class="alert alert-error dialogErrorMessage"
          ng-show="errorOnSubmit">
        <spring:message code="request.error"/>
    </span>
</div>

Answer 1

I think what you are looking for is horizontal forms provided by bootstrap (http://getbootstrap.com/css/#forms-horizontal). As can be seen from the example provided, you should club your labels and inputs together within a form-group class. Also don't forget to add the form-horizontal class to your form element. This should point you in the right direction:

<form class='form-horizontal'>
    <div class="form-group">
        <label for="element1" class="col-sm-2 control-label">Element 1</label>
        <div class="col-sm-10">
            <input type="email" class="form-control" id="element1" placeholder="Element 1">
        </div>
    </div>
    <div class="form-group">
        <label for="element2" class="col-sm-2 control-label">Element 2</label>
        <div class="col-sm-10">
            <input type="password" class="form-control" id="element2" placeholder="Element 2">
        </div>
    </div>
</form>

Within a form-group you have to add a label that is of 2-column width and a input element wrapped in a div that has 10-column width. Also I think you got the input-append wrong. I don't see the use there.

If you want to arrange the elements in columns, you will additionally have to arrange the form-group div elements within a grid like so:

<form class='form-horizontal'>
    <div class='row'>
        <div class='col-sm-6'>
            ...First column form groups...
        </div>
        <div class='col-sm-6'>
            ...Second column form groups...
        </div>
    </div>
    <div class='row'>
        <div class='col-sm-12'>
            ...Buttons...
        </div>
    </div>
</form>