bootstrap form inside modal not aligned properly

Question

I tried to make a modal form using bootstrap (horizontal form) and the field are shown under the labels. Any idea how can I fix it so the input text boxes will be at the right of the labels and not under them?

 <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close specialb" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Modal header</h3>
    </div>
    <div class="modal-body">

        <form class="form-horizontal" class="non-margined">
                <div class="control-group">
                    <label class="control-label" for="firstName">First name:</label>
                    <div class="controls">
                        <input type="text" id="firstName" placeholder="FirstName" />
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="lastName">Last name:</label>
                    <div class="controls">
                        <input type="password" id="lastName" placeholder="LastName" />
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="emailAddress">Email Address:</label>
                    <div class="controls">
                        <input type="password" id="emailAddress" placeholder="EmailAddress" />
                    </div>
                </div>  
        </form>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        <button class="btn btn-primary">Save changes</button>
    </div>
</div>

Answer 1

You need to place the form-horizontal declaration in with the modal-body declaration. This works.

<div class="modal-body form-horizontal">