mercredi 1 juillet 2015

Make form label align above input box

I'm trying to make my input boxes align above their text boxes however as shown in the jsfiddle below, their arrangement is totally out of wack.

JSfiddle: http://ift.tt/1CbN7JF

I would like them to look like this: tryingToMakeThemLookLikeThis

This is my HTML code:

       <form class="form-horizontal">

                                <p id="New">For New Individual's Only *</p>

                                <h1>Sign-up Requirements</h1>

                                  <div class="form-group">
                                    <label for="nric" class="col-sm-3 col-sm-offset-0 control-label">NRIC*</label>
                                     <div class="col-sm-offset-2  col-sm-9">
                                        <input type="text" class="form-control" id="nric" placeholder="Enter NRIC">
                                     </div>
                                  </div>

                                  <div class="form-group">
                                    <label for="firstName" class="col-sm-3 col-sm-pull-0 control-label">First Name*</label>
                                     <div class="col-sm-offset-2 col-sm-9">
                                        <input type="text" class="form-control" id="firstName" placeholder="Enter First Name">
                                     </div>
                                  </div>

                                  <div class="form-group">
                                    <label for="lastName" class="col-sm-3 col-sm-offset-0 control-label">Last Name*</label>
                                     <div class="col-sm-offset-2 col-sm-9">
                                        <input type="text" class="form-control" id="lastName" placeholder="Enter Last Name">
                                     </div>
                                  </div>

                                 <div class="form-group">
                                    <label for="email" class="col-sm-3 col-sm-offset-0 control-label">Email*</label>
                                    <div class="col-sm-offset-2 col-sm-9">
                                        <input type="text" class="form-control" placeholder="Enter email"/>
                                    </div>      
                                </div>

                                  <div class="form-group">
                                    <label for="inputPassword" class="col-sm-3 col-sm-offset-0 control-label">Login Password*</label>
                                    <div class="col-sm-offset-2 col-sm-9">
                                        <input type="password" class="form-control" id="inputPassword" placeholder="Enter Password">
                                    </div>
                                  </div>

                                <div class="form-group">
                                    <label for="confirmPassword" class="col-sm-3 control-label">Confirm Password*</label>
                                    <div class="col-sm-offset-2 col-sm-9">
                                        <input type="password" class="form-control" id="confirmPassword" placeholder="Enter Password">
                                    </div>
                                  </div>

                                 <div class="form-group">
                                    <div class="col-sm-9 col-sm-push-2">
                                        <label class="radio-inline">
                                            <input type="radio" name="ackRadio" value="option1" /> I have read and agreed to the <span id ="acknowledge"><a href="terms&condition.php">Terms and Conditions.</a></span>
                                        </label>
                                    </div>      
                                </div>


                                <div class="form-group">
                                    <div class="col-sm-offset-2 col-sm-9">
                                        <button type="register" class="btn btn-primary">Register</button>
                                    </div>
                                </div>

                            </form>

Aucun commentaire:

Enregistrer un commentaire