Bohn Bohn - 7 months ago 14
HTML Question

Aligning the controls in a DIV

My second week of learning and doing WebDevelopment! I have written this

Bootstrap
layout and the result is in the picture below.
Note the areas marked as yellow? why is that happening? How can I fix it? I know I can for example play around with
margin-left
,etc.. to make it look right but I am still thinking if I define they correctly in
bootstrap
, it shouldn't have this problem.

Here is the Bootply to see the issue: http://www.bootply.com/zRyxHyhdbM

Here is the generated HTML code:

<div class="row form-group">
<div class="col-sm-offset-2 col-sm-1 text-right"><label class="control-label" for="Email">Email</label></div>
<div class="col-sm-4">
<input id="AdminEmail" name="AdminEmail" style="width:100%;padding-right:30px;" type="text" value="">
<span class="glyphicon glyphicon-envelope form-control-feedback" style="right: 10px; line-height: 27px;"></span>
</div>

<div class="col-sm-4 col-sm-offset-1">
<div>
<input class="checkbox-inline" id="ShowAdminPhone" name="ShowAdminPhone" type="checkbox" value="true"><input name="ShowAdminPhone" type="hidden" value="false">
<label class="control-label" for="Show_Admin_phone">Show Admin phone</label>
</div>
</div>
</div>


<div class="row form-group">
<div class="col-sm-offset-2 col-sm-1 text-right"><label class="control-label" for="Phone">Phone</label></div>
<div class="col-sm-9 form-group">
<input class="col-sm-2" id="AdminPhone" name="AdminPhone" type="text" value="">
<label class="control-label col-sm-1" for="Ext">Ext</label>
<input class="col-sm-2" id="AdminExt" name="AdminExt" type="text" value="">
</div>
</div>


enter image description here

Answer

The misalignment is there because, the email input box is col-sm-4. To align bottom inputs we have to fit them with in col-sm-4. You can add margin-left(approx 12px) to align it but it will not be responsive. Hence, I have changed the markup a little bit to remain responsive-- Link --- http://www.bootply.com/x0fgleMTp2

    <div class="row form-group">
                    <div class="col-sm-offset-2 col-sm-1 text-right"><label class="control-label" for="Email">Email</label></div>
                    <div class="col-sm-4">
                        <input id="AdminEmail" name="AdminEmail" style="width:100%;padding-right:30px;" type="text" value="">
                        <span class="glyphicon glyphicon-envelope form-control-feedback" style="right: 10px; line-height: 27px;"></span>
                    </div>

                    <div class="col-sm-4 col-sm-offset-1">
                        <div>
                            <input class="checkbox-inline" id="ShowAdminPhone" name="ShowAdminPhone" type="checkbox" value="true"><input name="ShowAdminPhone" type="hidden" value="false">
                            <label class="control-label" for="Show_Admin_phone">Show Admin phone</label>
                        </div>
                    </div>
 </div>


 <div class="row form-group">
                    <div class="col-sm-offset-2 col-sm-1 text-right"><label class="control-label" for="Phone">Phone</label></div>
                    <div class="col-sm-4 multi-row">
                      <span class="col-sm-5"><input class="form-input" id="AdminPhone" name="AdminPhone" type="text" value=""></span>
                      <span class="col-sm-2"><label class="control-label" for="Ext">Ext</label></span>
                      <span class="col-sm-5"><input class="form-input" id="AdminExt" name="AdminExt" type="text" value=""></span>
                    </div>  
 </div>