Having issues on aligning labels properly - html

I am having an issue with aligning 2 labels, here is a screen shot of the image as it is right now, look at the Quantity and U.O.M labels
as you can see the Quantity and U.O.M is to far from the Purchase column, I need to get those two labels closer so it would look like this
As you can see I need the Quantity and U.O.M labels closer as in the pic. I have tried using a style of text align right and that didn't work.
How can I move the two labels more to the right?
Here is the complete code
<body>
<div style="width:830px; margin-left:50px;">
<div class="form-horizontal">
<ul class="nav nav-tabs">
<li class="active">Material Data</li>
<li>Material Color Assignment</li>
<li>Material Vendor Assignment</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="MaterialData">
<div class="panel panel-primary">
<div class="panel panel-heading"><strong>Add/Edit Material</strong></div>
<div class="panel-body">
<div class="row">
<div class="col-md-12">
<div class="col-md-4">
<input id="Category" class="form-control max-size" name="Category" required validationMessage="Select Category" />
<span class="k-invalid-msg" data-for="Category"></span>
</div>
<div class="col-md-4">
<input id="Type" class="form-control max-size" name="type" required validationMessage="Select type." />
<span class="k-invalid-msg" data-for="type"></span>
</div>
<div class="col-md-4" id="myDropdown">
<select class="form-control" name="subtype" id="SubType"></select>
</div>
</div>
</div>
</div>
<div class="panel panel-heading"><strong>Material Information</strong></div>
<div class="panel-body">
<div class="row">
<div class="form-group">
<label for="txtWidth" class="control-label col-md-1 col-md-offset-1" id="lblWidth"><b>Width</b></label>
<div class="col-md-2">
<input id="txtWidth" type="text" class="form-control" name="width" required validationMessage="Please add width." />
#*<span class="k-invalid-msg" data-for="width"></span>*#
</div>
<label for="txtLength" class="control-label col-md-1" id="lblLength"><b>Length</b></label>
<div class="col-md-2">
<input id="txtLength" type="text" class="form-control" name="length" required validationMessage="Please add length." />
#*<span class="k-invalid-msg" data-for="length"></span>*#
</div>
<label for="txtSize" class="control-label col-md-1" id="lblSize"><b>Size</b></label>
<div class="col-md-2">
<input id="txtSize" type="text" class="form-control" name="size" required validationMessage="Please add size." />
#*<span class="k-invalid-msg" data-for="size"></span>*#
</div>
</div>
</div>
</div>
<div class="panel panel-heading"><strong>Pricing and Labor Cost</strong></div>
<div class="panel-body">
<div class="row">
<div class="col-md-6">
<div class="row">
<label for="txtRemodel" class="control-label col-md-offset-5" id="lblDetail"><b>Sell Price</b></label>
<label for="txtRemodel2" class="control-label col-md-offset-2" id="lblDetail"><b>Labor Cost</b></label>
</div><!-- end row -->
<br />
<div class="row">
<label for="txtRemodel12" class="control-label col-md-2" id="lblRemodel">Remodel</label>
<div class="col-md-4 col-md-offset-2">
<input id="txtRemodel" type="text" class="form-control" name="remodel" required validationMessage="Please add sell prize." />
<span class="k-invalid-msg" data-for="remodel"></span>
</div>
<div class="col-md-4">
<input id="txtRemodel2" type="text" class="form-control" name="remodel2" required validationMessage="Please add labor cost." />
<span class="k-invalid-msg" data-for="remodel2"></span>
</div>
</div> <!-- end row -->
</div>
<div class="col-md-6">
<div class="row">
<label for="txtPurchaseQuantity" class="control-label col-md-offset-5" id="lblDetail"><b>Purchase</b></label>
<label for="txtSellQuantity" class="control-label col-md-offset-2" id="lblDetail"><b>Sell</b></label>
</div><!-- end row -->
<br />
<div class="row">
<label for="txtQuantity" class="control-label col-md-2" id="lblQuantity">Quantity</label>
<div class="col-md-4 col-md-offset-2">
<input id="txtPurchaseQuantity" type="text" class="form-control" name="purchasequantity" required validationMessage="Please add purchase qty." />
<span class="k-invalid-msg" data-for="purchasequantity"></span>
</div>
<div class="col-md-4">
<input id="txtSellQuantity" type="text" class="form-control" name="sellquantity" required validationMessage="Please add sell qty." />
<span class="k-invalid-msg" data-for="sellquantity"></span>
</div>
</div> <!-- end row -->
<div class="row row-splitter">
<label for="txtUOM" class="control-label col-md-2" id="lblUOM">U.O.M</label>
<div class="col-md-1 col-md-offset-2">
<select class="form-control" name="buyuom" id="ddBuyUOM" style="width:100px;" required validationMessage="Select purchase U.O.M."></select>
<span class="k-invalid-msg" data-for="buyuom"></span>
</div>
<div class="col-md-1 col-md-offset-3">
<select class="form-control" name="selluom" id="ddSellUOM" style="width:100px;" required validationMessage="Select sell U.O.M."></select>
<span class="k-invalid-msg" data-for="selluom"></span>
</div>
</div> <!-- end row -->
</div>
</div>
</div>
</div>
</div><!--End Material Data-->
</div><!--End tab content-->
</div>
</div>
</body>


try below snippet
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div style="width:830px; margin-left:50px;">
<div class="form-horizontal">
<ul class="nav nav-tabs">
<li class="active">Material Data</li>
<li>Material Color Assignment</li>
<li>Material Vendor Assignment</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="MaterialData">
<div class="panel panel-primary">
<div class="panel panel-heading"><strong>Add/Edit Material</strong></div>
<div class="panel-body">
<div class="row">
<div class="col-md-12">
<div class="col-md-4">
<input id="Category" class="form-control max-size" name="Category" required validationMessage="Select Category" />
<span class="k-invalid-msg" data-for="Category"></span>
</div>
<div class="col-md-4">
<input id="Type" class="form-control max-size" name="type" required validationMessage="Select type." />
<span class="k-invalid-msg" data-for="type"></span>
</div>
<div class="col-md-4" id="myDropdown">
<select class="form-control" name="subtype" id="SubType"></select>
</div>
</div>
</div>
</div>
<div class="panel panel-heading"><strong>Material Information</strong></div>
<div class="panel-body">
<div class="row">
<div class="form-group">
<label for="txtWidth" class="control-label col-md-1 col-md-offset-1" id="lblWidth"><b>Width</b></label>
<div class="col-md-2">
<input id="txtWidth" type="text" class="form-control" name="width" required validationMessage="Please add width." />
#*<span class="k-invalid-msg" data-for="width"></span>*#
</div>
<label for="txtLength" class="control-label col-md-1" id="lblLength"><b>Length</b></label>
<div class="col-md-2">
<input id="txtLength" type="text" class="form-control" name="length" required validationMessage="Please add length." />
#*<span class="k-invalid-msg" data-for="length"></span>*#
</div>
<label for="txtSize" class="control-label col-md-1" id="lblSize"><b>Size</b></label>
<div class="col-md-2">
<input id="txtSize" type="text" class="form-control" name="size" required validationMessage="Please add size." />
#*<span class="k-invalid-msg" data-for="size"></span>*#
</div>
</div>
</div>
</div>
<div class="panel panel-heading"><strong>Pricing and Labor Cost</strong></div>
<div class="panel-body">
<div class="row">
<div class="col-md-6">
<div class="row">
<label for="txtRemodel" class="control-label col-md-offset-5" id="lblDetail"><b>Sell Price</b></label>
<label for="txtRemodel2" class="control-label col-md-offset-2" id="lblDetail"><b>Labor Cost</b></label>
</div><!-- end row -->
<br />
<div class="row">
<label for="txtRemodel12" class="control-label col-md-2" id="lblRemodel">Remodel</label>
<div class="col-md-4 col-md-offset-2">
<input id="txtRemodel" type="text" class="form-control" name="remodel" required validationMessage="Please add sell prize." />
<span class="k-invalid-msg" data-for="remodel"></span>
</div>
<div class="col-md-4">
<input id="txtRemodel2" type="text" class="form-control" name="remodel2" required validationMessage="Please add labor cost." />
<span class="k-invalid-msg" data-for="remodel2"></span>
</div>
</div> <!-- end row -->
</div>
<div class="col-md-6">
<div class="row">
<label for="txtPurchaseQuantity" class="control-label col-md-offset-5" id="lblDetail"><b>Purchase</b></label>
<label for="txtSellQuantity" class="control-label col-md-offset-2" id="lblDetail"><b>Sell</b></label>
</div><!-- end row -->
<br />
<div class="row">
<div class="col-md-3 col-md-offset-1">
<label for="txtQuantity" class="control-label " id="lblQuantity">Quantity</label></div>
<div class="col-md-4 ">
<input id="txtPurchaseQuantity" type="text" class="form-control" name="purchasequantity" required="" validationmessage="Please add purchase qty.">
<span class="k-invalid-msg" data-for="purchasequantity"></span>
</div>
<div class="col-md-4">
<input id="txtSellQuantity" type="text" class="form-control" name="sellquantity" required="" validationmessage="Please add sell qty.">
<span class="k-invalid-msg" data-for="sellquantity"></span>
</div>
</div> <!-- end row -->
<div class="row row-splitter">
<div class="col-md-3 col-md-offset-1"><label for="txtUOM" class="control-label " id="lblUOM">U.O.M</label></div>
<div class="col-md-1 ">
<select class="form-control" name="buyuom" id="ddBuyUOM" style="width:100px;" required validationMessage="Select purchase U.O.M."></select>
<span class="k-invalid-msg" data-for="buyuom"></span>
</div>
<div class="col-md-1 col-md-offset-3">
<select class="form-control" name="selluom" id="ddSellUOM" style="width:100px;" required validationMessage="Select sell U.O.M."></select>
<span class="k-invalid-msg" data-for="selluom"></span>
</div>
</div> <!-- end row -->
</div>
</div>
</div>
</div>
</div><!--End Material Data-->
</div><!--End tab content-->
</div>
</div>
</body>

Related

Bootstrap 3 grid system offset

I'm using the bootstrap 3 grid system and I'm wondering how I can get the 'Contact Details' tab to show under the 'Date of Birth' tab without any large white blank space?
I've attached some of the code used on the page which you can see being replicated on the screenshot. You will see from the code that the 'Contact Details' are quite a bit down the page. I am able to figure out the offset but just not the placement of the code.
<form method="post" role="form">
<div class="row setup-content" id="step-1">
<h3>
Partner Details <small>* marks a required field</small>
</h3>
<br>
<div class="row">
<div class="col-md-8">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
Name and address
</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-6 col-md-4">
<div class="form-group">
<label for="title">
Title
</label>
<select id="inputtitle" name="title" class="form-control" onchange="updateReview('title');" tabindex=1 />
<option value="" class="disabled" {if isset($val_title)}selected{/if}>Please select</option>
<option value="Master" {if $val_title eq "Master"} selected{/if}>Master</option>
<option value="Mr" {if $val_title eq "Mr"} selected{/if}>Mr</option>
<option value="Mrs" {if $val_title eq "Mrs"} selected{/if}>Mrs</option>
<option value="Miss" {if $val_title eq "Miss"} selected{/if}>Miss</option>
<option value="Ms" {if $val_title eq "Ms"} selected{/if}>Ms</option>
<option value="Rev." {if $val_title eq "Rev."} selected{/if}>Rev.</option>
</select>
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="form-group">
<label for="firstname">
First Name
<span class="asteriskField">
*
</span>
</label>
<input value="{$val_firstname}" type="text" onchange="updateReview('firstname');" class="form-control inputfirstname" id="firstname" name="firstname" placeholder="First Name" tabindex=2 />
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="form-group">
<label for="surname">
Surname
<span class="asteriskField">
*
</span>
</label>
<input value="{$val_surname}" type="text" onchange="updateReview('surname');" class="form-control inputsurname" id="surname" name="surname" placeholder="Surname" tabindex=3 />
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-6 col-md-4">
<div class="form-group">
<label for="address1">
Address Line 1
</label>
<input value="{$val_address1}" type="text" onchange="updateReview('address1');" class="form-control inputaddress1" id="address1" name="address1" placeholder="Address Line 1" tabindex=4 />
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="form-group">
<label for="address2">
Address Line 2 <small>(optional)</small>
</label>
<input value="{$val_address2}" type="text" onchange="updateReview('address2');" class="form-control inputaddress2" id="address2" name="address2" placeholder="Address Line 2" tabindex=5 />
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="form-group">
<label for="citytown">
City/Town
</label>
<input value="{$val_citytown}" type="text" onchange="updateReview('citytown');" class="form-control inputcitytown" id="citytown" name="citytown" placeholder="City/Town" tabindex=6 />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-4">
<div class="form-group">
<label for="county">
County
</label>
<input value="{$val_county}" type="text" onchange="updateReview('county');" class="form-control inputcounty" id="county" name="county" placeholder="County" tabindex=7 />
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="form-group">
<label for="country">
Country
</label>
<select id="inputcountry" name="country" class="form-control" name="country" onchange="updateReview('country');" tabindex=8 />
<option>Please select</option>
<option>Scotland</option>
<option>England</option>
<option>Wales</option>
<option>Northern Ireland</option>
<option>Other</option>
</select>
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="form-group">
<label for="postalcode">
Postal Code
</label>
<input value="{$val_postalcode}" type="text" onchange="updateReview('postalcode');" class="form-control inputpostalcode" id="postalcode" name="postalcode" placeholder="Postal Code" tabindex=9 />
</div>
</div>
</div>
</div>
<!-- END COL-MD-8 -->
</div>
<!-- END ROW -->
</div>
<!-- END STEP 1 -->
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
Date of Birth
</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
</div>
<div class="col-md-4 col-md-offset-8">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
Contact Details
</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-6 col-md-12">
<div class="form-group">
<label for="home">
Home Telephone Number
</label>
<input value="{$val_hometel}" type="tel" onchange="updateReview('home');" class="form-control inputhome" id="home" name="hometel" placeholder="Home Telephone Number" tabindex=11 />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-12">
<div class="form-group">
<label for="mobile">
Mobile Telephone Number
</label>
<input value="{$val_mobtel}" type="tel" onchange="updateReview('mobile');" class="form-control inputmobile" id="mobile" name="mobtel" placeholder="Mobile Telephone Number" tabindex=12 />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-12">
<div class="form-group">
<label for="email">
Email Address
</label>
<input value="{$val_email}" type="text" onchange="updateReview('email');" class="form-control inputemail" id="email" name="email" placeholder="Email Address" tabindex=13 />
</div>
</div>
</div>
</div>
</div>
</div>
<br>
<button class="btn btn-primary nextBtn btn-lg pull-right" type="button" tabindex=10 /> Next
</button>
</div>
</div>

You can get the 'contact details' part just below 'date of birth' part if you put both of them inside same div element. Try this code.
<form method="post" role="form">
<div class="row setup-content" id="step-1">
<h3>
Partner Details <small>* marks a required field</small>
</h3>
<br>
<div class="row">
<div class="col-md-8">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
Name and address
</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-6 col-md-4">
<div class="form-group">
<label for="title">
Title
</label>
<select id="inputtitle" name="title" class="form-control" onchange="updateReview('title');" tabindex=1 />
<option value="" class="disabled" {if isset($val_title)}selected{/if}>Please select</option>
<option value="Master" {if $val_title eq "Master"} selected{/if}>Master</option>
<option value="Mr" {if $val_title eq "Mr"} selected{/if}>Mr</option>
<option value="Mrs" {if $val_title eq "Mrs"} selected{/if}>Mrs</option>
<option value="Miss" {if $val_title eq "Miss"} selected{/if}>Miss</option>
<option value="Ms" {if $val_title eq "Ms"} selected{/if}>Ms</option>
<option value="Rev." {if $val_title eq "Rev."} selected{/if}>Rev.</option>
</select>
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="form-group">
<label for="firstname">
First Name
<span class="asteriskField">
*
</span>
</label>
<input value="{$val_firstname}" type="text" onchange="updateReview('firstname');" class="form-control inputfirstname" id="firstname" name="firstname" placeholder="First Name" tabindex=2 />
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="form-group">
<label for="surname">
Surname
<span class="asteriskField">
*
</span>
</label>
<input value="{$val_surname}" type="text" onchange="updateReview('surname');" class="form-control inputsurname" id="surname" name="surname" placeholder="Surname" tabindex=3 />
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-6 col-md-4">
<div class="form-group">
<label for="address1">
Address Line 1
</label>
<input value="{$val_address1}" type="text" onchange="updateReview('address1');" class="form-control inputaddress1" id="address1" name="address1" placeholder="Address Line 1" tabindex=4 />
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="form-group">
<label for="address2">
Address Line 2 <small>(optional)</small>
</label>
<input value="{$val_address2}" type="text" onchange="updateReview('address2');" class="form-control inputaddress2" id="address2" name="address2" placeholder="Address Line 2" tabindex=5 />
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="form-group">
<label for="citytown">
City/Town
</label>
<input value="{$val_citytown}" type="text" onchange="updateReview('citytown');" class="form-control inputcitytown" id="citytown" name="citytown" placeholder="City/Town" tabindex=6 />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-4">
<div class="form-group">
<label for="county">
County
</label>
<input value="{$val_county}" type="text" onchange="updateReview('county');" class="form-control inputcounty" id="county" name="county" placeholder="County" tabindex=7 />
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="form-group">
<label for="country">
Country
</label>
<select id="inputcountry" name="country" class="form-control" name="country" onchange="updateReview('country');" tabindex=8 />
<option>Please select</option>
<option>Scotland</option>
<option>England</option>
<option>Wales</option>
<option>Northern Ireland</option>
<option>Other</option>
</select>
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="form-group">
<label for="postalcode">
Postal Code
</label>
<input value="{$val_postalcode}" type="text" onchange="updateReview('postalcode');" class="form-control inputpostalcode" id="postalcode" name="postalcode" placeholder="Postal Code" tabindex=9 />
</div>
</div>
</div>
</div>
<!-- END COL-MD-8 -->
</div>
<!-- END ROW -->
</div>
<!-- END STEP 1 -->
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
Date of Birth
</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
Contact Details
</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-6 col-md-12">
<div class="form-group">
<label for="home">
Home Telephone Number
</label>
<input value="{$val_hometel}" type="tel" onchange="updateReview('home');" class="form-control inputhome" id="home" name="hometel" placeholder="Home Telephone Number" tabindex=11 />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-12">
<div class="form-group">
<label for="mobile">
Mobile Telephone Number
</label>
<input value="{$val_mobtel}" type="tel" onchange="updateReview('mobile');" class="form-control inputmobile" id="mobile" name="mobtel" placeholder="Mobile Telephone Number" tabindex=12 />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-12">
<div class="form-group">
<label for="email">
Email Address
</label>
<input value="{$val_email}" type="text" onchange="updateReview('email');" class="form-control inputemail" id="email" name="email" placeholder="Email Address" tabindex=13 />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<br>
<button class="btn btn-primary nextBtn btn-lg pull-right" type="button" tabindex=10 /> Next
</button>
</div>
</div>

Bootstrap 3 - Two Column Layout - Get rid of placeholder

I am trying to create a form using bootstrap 3 that looks like
this.
I can get it to look pretty similar, but the only problem I have is that my last horizontal rule in the ETO section goes the entire way across. Is there any way I can make this only go across half of the page? I tried putting it in different col sizes inside that but I couldn't get it to work. Here's my html. Thanks ahead of time!
<div class="panel panel-default">
<div class="panel-heading">
<label style="color: white; font-weight: bold;">JOHNSON Summary</label>
</div>
<div class="panel-body">
<form class="form-horizontal" role="form" style="overflow-x:auto;">
<fieldset>
<div class="col-xs-6">
<div class="form-group">
<label class="col-xs-5"> Status </label>
<div class="col-xs-7">
<select class="form-control" id="empStatus">
<option value="" disabled>Choose Type....</option>
<option value="Current">Current</option>
<option value="Terminated">Terminated</option>
</select>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="col-xs-5"> Anniversary </label>
<div class="col-xs-7">
<input class='form-control' type="text" id="empAnniversary"/>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="col-xs-5"> Start Date </label>
<div class="col-xs-7">
<input class='form-control' type="date" id="empStartDate"/>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="col-xs-5"> Adjusted Start </label>
<div class="col-xs-7">
<input class='form-control' type="date" id="empAdjustedStart"/>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="col-xs-5"> STD/LTD </label>
<div class="col-xs-7">
<input class='form-control' type="text" id="empSTDLTD"/>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="col-xs-5"> Uncharged </label>
<div class="col-xs-7">
<input class='form-control' type="text" id="empUncharged"/>
</div>
</div>
</div>
</fieldset>
<fieldset>
<h4>PTO</h4>
<div class="col-xs-12">
<div class="form-group">
<div class="col-xs-1"></div>
<label class="col-xs-2"> Base </label>
<div class="col-xs-3">
<input class='form-control' type="text" id="ptoBase" />
</div>
<div class="col-xs-6">
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="col-xs-2" style="font-weight: bold;"> + </label>
<label class="col-xs-4"> Carryover </label>
<div class="col-xs-6">
<input class='form-control' type="text" id="ptoCarryover" />
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<div class="col-xs-1"></div>
<label class="col-xs-4"> Balance </label>
<div class="col-xs-6">
<input class='form-control' type="text" id="ptoBalance" />
</div>
<div class="col-xs-1"></div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="col-xs-2" style="font-weight: bold;"> ― </label>
<label class="col-xs-4"> Borrowed </label>
<div class="col-xs-6">
<input class='form-control' type="text" id="ptoBorrowed" />
</div>
</div>
<hr style="border: solid 1px black;border-bottom:1px solid black;clear:both" />
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="col-xs-1" style="font-weight: bold;"> ― </label>
<label class="col-xs-4"> Requests </label>
<div class="col-xs-6">
<input class='form-control' type="text" id="ptoRequests" />
</div>
<div class="col-xs-1"></div>
</div>
<hr style="border: solid 1px black;border-bottom:1px solid black;clear:both" />
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="col-xs-2" style="font-weight: bold;"> = </label>
<label class="col-xs-4"> Balance </label>
<div class="col-xs-6">
<input class='form-control' type="text" id="ptoBalance" />
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="col-xs-1" style="font-weight: bold;"> = </label>
<label class="col-xs-4"> Available </label>
<div class="col-xs-6">
<input class='form-control' type="text" id="ptoAvailable" />
</div>
<div class="col-xs-1"></div>
</div>
</div>
</fieldset>
<fieldset>
<h4>ETO</h4>
<div class="col-xs-12">
<div class="form-group">
<div class="col-xs-1"></div>
<label class="col-xs-2"> Earned </label>
<div class="col-xs-3">
<input class='form-control' type="text" id="etoEarned" />
</div>
<div class="col-xs-6">
</div>
</div>
</div>
<div class="col-xs-12">
<div class="form-group">
<label class="col-xs-1"> ― </label>
<label class="col-xs-2"> Requests </label>
<div class="col-xs-3">
<input class='form-control' type="text" id="etoRequested" />
</div>
<div class="col-xs-6">
</div>
</div>
<hr style="border: solid 1px black;border-bottom:1px solid black;clear:both" />
</div>
<div class="col-xs-12">
<div class="form-group">
<label class="col-xs-1"> = </label>
<label class="col-xs-2"> Available </label>
<div class="col-xs-3">
<input class='form-control' type="text" id="etoAvailable" />
</div>
<div class="col-xs-6">
</div>
</div>
</div>
</fieldset>
</form>
</div>
</div>

UPDATED.
I think you need to use Bootstrap's horizontal form as described in official docs. It seems you are using horizontal form structure, but you've forgotten to add .form-horizontal class to your form element or to .form-group.

Print of Html Form by calling windows.print();

On the click of Print button windows.print() function gets called and a print of the form is taken.But in the print every form field gets allocated a entire separate row.I wanted the form fields to be arranged in the same order as they are arranged in the form.
For Ex:Father's Occupation,Education,Income fields are in one single row but in the print they are assigned separate rows.
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="form2.css">
</head>
<body>
<div class="container box-container">
<h1 align="center">Admission Form</h1>
<h3 align="center">(2016/2017)</h3>
<br/>
<form class="form-inline" id="sunrise" name="sunrise" method="post" action="">
<div class="row">
<div class="col-md-8 col-sm-12 col-md-offset-4">
<div class="form-group upload"> <label>Upload Child's Image:</label>
<input name="fileUpload" type="file" id="fileUpload" /><br />
<div name="image-holder" id="image-holder"> </div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-4">
<div class="form-group">
<label>Scholar No:</label>
<input type="text" class="form-control" name="scholar" placeholder="Scholar No:" disabled>
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="form-group" >
<label>Class:</label>
<input type="text" class="form-control" name="class" placeholder="Class">
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="form-group">
<label>Date:</label>
<input name="date" id="date" name="date" class="form-control" placeholder="Date" disabled>
</div>
</div>
</div>
<br/>
<div class="row">
<div class="col-md-2 col-sm-2"> <label>Name:</label></div>
<div class="col-md-10 col-sm-10"><div class="col-md-6 col-sm-6"> <input type="text" class="form-control box-size" name="name" placeholder="Name"></div></div>
</div>
<div class="row">
<div class="col-md-2 col-sm-2"> <label>Father's Name:</label></div>
<div class="col-md-10 col-sm-10"><div class="col-md-6 col-sm-6"> <input type="text" class="form-control box-size" name="father" placeholder="Father's Name"></div></div>
</div>
<div class="row">
<div class="col-md-2 col-sm-2"> <label>Mother's Name:</label></div>
<div class="col-md-10 col-sm-10"><div class="col-md-6 col-sm-6"> <input type="text" class="form-control box-size" name="mother" placeholder="Mother's Name"></div></div>
</div>
<div class="row">
<div class="col-md-2 col-sm-2"> <label>DOB:</label></div>
<div class="col-md-10 col-sm-10"><div class="col-md-6 col-sm-6"> <input type="date" class="form-control box-size" name="dob" placeholder="Date of Birth">
</div></div>
</div>
<div class="row">
<div class="col-md-2 col-sm-2"> <label>Gender:</label></div>
<div class="col-md-10 col-sm-10"><div class="col-md-6 col-sm-6"> <select class="form-control" name="gender">
<option>Male</option>
<option>Female</option>
</select>
</div></div>
</div>
<div class="row">
<div class="col-md-2 col-sm-2">
<label>Category:</label>
</div>
<div class="col-md-10 col-sm-10">
<div class="col-md-6">
<div class="checkbox">
<label><input type="checkbox" value="gen">Gen</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="obc">Obc</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="st">ST</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="sc">SC</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="sbc">SBC</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="bpl">BPL</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="other">OTHER</label>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-4">
<div class="form-group">
<label>Cast:</label>
<input type="text" class="form-control" name="cast" placeholder="Cast">
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="form-group" >
<label>Aadhar Card No:</label>
<input type="text" class="form-control" name="aadhar" placeholder="Aadhar Card No">
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="form-group">
<label>Religion:</label>
<input type="text" class="form-control" name="religion" placeholder="Religion">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="form-group">
<label>Present Address:</label>
<input type="text" class="form-control" name="present" placeholder="Present Address">
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="form-group" >
<label>Pin Code:</label>
<input type="text" class="form-control" name="pin" placeholder="Pin Code">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="form-group">
<label>Permanent Address:</label>
<input type="text" class="form-control" name="permanent" placeholder="Permanent Address">
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="form-group" >
<label>Pin Code:</label>
<input type="text" class="form-control" name="pincode" placeholder="Pin Code">
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-4">
<div class="form-group">
<label>Mobile No 1:
</label>
<input type="text" class="form-control" name="mobile" placeholder="Mobile Number 1">
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="form-group" >
<label>2:</label>
<input type="text" class="form-control" name="mobile2" placeholder="Mobile Number 2">
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="form-group">
<label>3:</label>
<input type="text" class="form-control" name="mobile3" placeholder="Mobile Number 3">
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-4">
<div class="form-group">
<label>Occuption</label>
<input type="text" class="form-control" name="fatherjob" placeholder="Father's Occuption">
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="form-group" >
<label>Education:</label>
<input type="text" class="form-control" name="fatheredu" placeholder="Education">
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="form-group">
<label>Income:</label>
<input type="text" class="form-control" name="fatherincome" placeholder="Income">
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-4">
<div class="form-group">
<label>Occuption</label>
<input type="text" class="form-control" name="motherjob" placeholder="Mother's Occuption">
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="form-group" >
<label>Education:</label>
<input type="text" class="form-control" name="motheredu" placeholder="Education">
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="form-group">
<label>Income:</label>
<input type="text" class="form-control" name="motherincome" placeholder="Mother Income">
</div>
</div>
</div>
<div class="row">
<div class="col-md-2 col-sm-2"> <label>Last School Name:</label>
</div>
<div class="col-md-10 col-sm-10"><div class="col-md-6 col-sm-6"> <input type="text" class="form-control box-size" name="lastschool" placeholder="Last School Name">
</div></div>
</div>
<div class="row">
<div class="col-md-4 col-sm-4">
<div class="form-group">
<label>Passed Class:</label>
<input type="text" class="form-control" name="classpassed" placeholder="Passed Class">
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="form-group" >
<label>Obtained Marks:</label>
<input type="text" class="form-control" name="marksobtained" placeholder="Obtained Marks">
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="form-group">
<label>Percentage:</label>
<input type="text" class="form-control" name="percentage" placeholder="Percentage">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="form-group">
<label>Hosteler/Day Scholar:</label>
<select class="form-control" name="hostelornot">
<option>Day Scholar</option>
<option>Hosteler</option>
</select> </div>
</div>
<div class="col-md-6 col-sm-6">
<div class="form-group" >
<label>
Bus Facility:</label>
<input type="text" class="form-control" name="bus" placeholder="Bus Facility">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="form-group">
<label>Physical Disability:</label>
<select class="form-control" name="disability">
<option>NO</option>
<option>YES</option>
</select> </div>
</div>
<div class="col-md-6 col-sm-6">
<div class="form-group" >
<label>Any allergical disease:</label>
<input type="text" class="form-control" name="disease" placeholder="Any allergical disease">
</div>
</div>
</div>
<h2 align="center">Declaration By Parent</h2>
<div class="">
<div class="checkbox">
<label><input type="checkbox" value="done" required /></label>We have read the prospectus of Sunrise International Public School and undertake to abide by all the rules as laid down in the school prospectus, we also agree to abide by any amendment to these rules, which may be incorporated from time to time.
</div>
</div>
<br/>
<br/>
<div class="row signature">
<div class="">
<label>Candidate's Signature:</label>
</div>
<div class="">
<label>Parent's Signature:</label>
</div>
<div class="">
<label>Principal's Signature:</label>
</div>
</div>
<br/>
<br/>
<button type="button" class="btn btn-default" id="print" onclick="window.print()">Print Application</button>
<button type="submit" class="btn btn-default" name="submit" value="submit">Submit</button>
</form>
</div>
<script>
$("#fileUpload").on('change', function () {
if (typeof (FileReader) != "undefined") {
var image_holder = $("#image-holder");
image_holder.empty();
var reader = new FileReader();
reader.onload = function (e) {
$("<img />", {
"src": e.target.result,
"class": "thumb-image"
}).appendTo(image_holder);
}
image_holder.show();
reader.readAsDataURL($(this)[0].files[0]);
} else {
alert("This browser does not support FileReader.");
}
});
</script>
<script type="text/javascript">
document.getElementById('date').value = Date();
</script>
</body>
</html>

Bootstrap Multicolumn Form-horizontal Styling only one one col-

I have an order form on my website, using the form-horizontal class provided in bootstrap. The form has a left and right section in the form of two columns. The left col is formatting great as it should with form-horizontal but the right col isn't unfortunately. Any help to get it looking right would be greatly appreciated!
You can find it live here: http://www.bannermastering.co.uk/order.html
Form Code
<form id="orderform" name="orderform" class="form-horizontal" role="form" method="post" action="ordermailer.php">
<div class="row">
<!-- """"""""""""""""""""""""""""""""""""" -->
<!-- CLIENT INFO [Left side of order form] -->
<!-- ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, -->
<div class="col-md-5 col-md-offset-1 col-sm-12 form-top-border form-bg client-info">
<h2 class="text-center"><i class="fa fa-user"></i> Client Info</h2>
<div class="form-group">
<label for="txtartistname" class="col-sm-3 control-label ">Artist Name</label>
<div class="col-sm-7">
<input id="txtartistname" name="txtartistname" type="text" class="form-control" placeholder="Artist / Group / Band Name"/>
</div>
</div>
<div class="form-group">
<label for="txtclientname" class="col-sm-3 control-label">Your Name</label>
<div class="col-sm-7">
<input id="txtclientname" name="txtclientname" type="text" class="form-control" placeholder="Your Name"/>
</div>
</div>
<div class="form-group">
<label for="txtemail" class="col-sm-3 control-label">Email</label>
<div class="col-sm-7">
<input id="txtemail" name="txtemail" type="email" class="form-control" placeholder="example#domain.com"/>
</div>
</div>
<div class="form-group">
<label for="txtnotes" class="col-sm-3 control-label">Track Listing & Notes</label>
<div class="col-sm-9">
<textarea id="txtnotes" name="txtnotes" class="form-control" rows="4"
placeholder="Please enter Track Names and Additional Information e.g Mastering Preferences" value=""></textarea>
</div>
</div>
</div>
<!-- """""""""""""""""""""""""""""""""""""""" -->
<!-- ORDER DETAILS [right side of order form] -->
<!-- ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, -->
<div class="col-md-5 col-sm-12 form-top-border order-details form-bg">
<h2 class="text-center"><i class="fa fa-shopping-cart"></i> Order Details</h2>
<div class="form-group">
<label for="txttrackquantity" class="col-sm-9 control-label label-padding bottom-border-dark">Number of Tracks to Master</label>
<div class="col-sm-3 margin5">
<input id="txttrackquantity" name="txttrackquantity" type="text" onkeyup="calculatetotal()" class="form-control" placeholder="0" maxlength="2" data-fv-notempty />
</div>
</div>
<div class="form-group">
<label for="txtstemquantity" class="col-sm-9 control-label label-padding bottom-border-dark">How many of these need Stem Mastering?</label>
<div class="col-sm-3 margin5">
<input id="txtstemquantity" name="txtstemquantity" type="text" onkeyup="calculatetotal()" class="form-control" placeholder="0" maxlength="2"/>
</div>
</div>
<div class="form-group">
<label for="txtdualquantity" class="col-sm-9 control-label label-padding bottom-border-dark">How many require a Dual Master?</label>
<div class="col-sm-3 margin5">
<input id="txtdualquantity" name="txtdualquantity" type="text" onkeyup="calculatetotal()" class="form-control" placeholder="0" maxlength="2"/>
</div>
</div>
<div class="form-group">
<label for="chkDDP" class="col-sm-9 control-label label-padding bottom-border-dark">DDP Format Master</label>
<div class="col-sm-2 margin5">
<input id="chkDDP" name="chkDDP" type="checkbox" class="faChkSqr" onclick="calculatetotal()"/><br>
</div>
</div>
<div class="form-group">
<label for="rdoloudness" class="col-sm-4 control-label bring-left small-top-padding">Desired Loudness</label>
<br>
<div class="col-sm-12">
<label class="radio-inline">
<input id="engineersdiscretion" name="rdoloudness" value="Engineers Discretion" type="radio" checked/>Engineers Discretion
</label>
<label class="radio-inline">
<input id="dynamic" name="rdoloudness" value="Dynamic" type="radio"/>Dynamic
</label>
<label class="radio-inline">
<input id="balanced" name="rdoloudness" value="Balanced" type="radio"/>Balanced
</label>
<label class="radio-inline">
<input id="loud" name="rdoloudness" value="Loud" type="radio"/>Loud
</label>
</div>
</div> <!-- / Loudness Radios -->
</div> <!-- /COL ORDER DETAILS -->
<!-- PRICING ROW -->
<div class="row">
<div class="col-md-5 col-md-offset-1 credit-card-logos">
<div class="col-xs-3 margin40">
<h4 class="pull-right"><strong>Pay With</strong></h4>
</div>
<div class="col-xs-9">
<!-- PayPal Logo -->
<table border="0" cellpadding="10" cellspacing="0" align="center"><tr><td align="center"></td></tr><tr><td align="center"><img src="https://www.paypalobjects.com/webstatic/mktg/Logo/AM_mc_vs_ms_ae_UK.png" border="0" alt="PayPal Acceptance Mark"></td></tr></table><!-- PayPal Logo -->
</div> <!-- /col-md-10 -->
</div><!-- End Credit card logos left panel -->
<!-- PRICE PANEL -->
<div class="col-md-5 form-top-border form-bg pricing-panel">
<div class="col-sm-6">
<h2 id="txttotalprice" name="txttotalprice">Total £0.00</h2>
<div class="row">
<div class="form-group">
<label for="cbocurrency" class="col-xs-3 col-xs-offset-1 control-label" style="padding-top: 5px">Currency</label>
<div class="col-xs-5 col-xs-offset-1" style="padding-top: 5px">
<select id="cbocurrency" name="cbocurrency" onchange="calculatetotal()">
<option value="£">GBP</option>
<option value="$">USD</option>
<option value="€">EUR</option>
<option value="$">AUD</option>
</select>
</div>
</div><!-- /form-group -->
</div><!-- /row -->
</div><!-- /col-sm-5 -->
<div class="col-sm-4">
<div class="form-group">
<!-- Do NOT use name="submit" or id="submit" for the Submit button -->
<button type="submit" class="btn order-button">Confirm & Pay</button>
</div><!-- /form-group -->
</div><!--/col-sm-4 -->
<!-- Hidden inputs to hold data for the PHP script that emails the order -->
<div class="form-group">
<input type="hidden" id="hidtotalprice" name="hidtotalprice" value="">
<input type="hidden" id="hidcurrencycode" name="hidcurrencycode" value="">
<input type="hidden" id="hidcurrencysymbol" name="hidcurrencysymbol" value="">
<input type="hidden" id="hidurlend" name="hidurlend" value="">
</div>
</div><!-- End Price /col-md-5 -->
</div> <!-- End Row -->

It is not clear for me what would look RIGHT for you, but from what I see, you might want to move the underlines on the right a bit by adding padding-left:30px for example to the right div:
<div class="col-md-5 col-sm-12 form-top-border order-details form-bg" style="padding-left: 30px;">

Bootstrap form text and input aligning in 2 columns

I'm tryind to understand bootstrap v2.3.2.
I want to make form like this using divs...
I done this code with divs
<form class="form-horizontal">
<fieldset>
<div class="row-fluid no-space">
<div class="span3 blockkk">
<p class="pull-right">1111111111111:</p>
</div>
<div class="span3 blockk ">
<p class="pull-left">22222222</p>
</div>
<div class="span3 blockkk">
<p class="pull-right">3333:</p></div>
<div class="span3 blockk">
<p class="pull-left">4444444444444</p></div>
</div>
<div class="row-fluid no-space">
<div class="span3 blockkk">
<p class="pull-right">1111111111111:</p>
</div>
<div class="span3 blockk ">
<p class="pull-left">22222222</p>
</div>
<div class="span3 blockkk">
<p class="pull-right">3333:</p></div>
<div class="span3 blockk">
<p class="pull-left">4444444444444</p></div>
</div>
</fieldset>
</form>
it looks exactly as i need
Now i'm trying to ad there inputs and lables using divs 'control-group',
'control-label', 'controls' and it becomes hell :[ I dont understand how to place them there correctly(
<form class="form-horizontal">
<fieldset>
<div class="row-fluid no-space">
<div class="span6 ">
<div class="control-group">
<div class="row-fluid">
<div class="span6 blockkk">
<div class="pull-right">
<label class="control-label" for="textinput">Text Input</label>
</div>
</div>
<div class="span6 blockk">
<div class="pull-left">
<div class="controls">
<input id="textinput" name="textinput" placeholder="placeholder" class="input-small" type="text">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="span6 blockk">
second row
</div>
</div>
</fieldset>
</form>
Tried this way but the code is huge, and i can't find the way to make this input move left... noway.
How to solve this issue correctly?
Thank you!

Using Bootstrap3 try the below :
<form class="form-horizontal">
<div class="row" style="padding-bottom : 10px">
<div class="col-lg-1 col-lg-offset-2">
<label class="control-label pull-right">Text:</label>
</div>
<div class="col-lg-2">
<input class="form-control" type="text" />
</div>
<div class="col-lg-1 col-lg-offset-2">
<label class="control-label pull-right">Text:</label>
</div>
<div class="col-lg-2">
<input class="form-control" type="text" />
</div>
</div>
<div class="row" style="padding-bottom : 10px">
<div class="col-lg-2 col-lg-offset-1">
<label class="control-label pull-right">Text another one:</label>
</div>
<div class="col-lg-2">
<input class="form-control" type="text" />
</div>
<div class="col-lg-2 col-lg-offset-1">
<label class="control-label pull-right">Text another one:</label>
</div>
<div class="col-lg-2">
<input class="form-control" type="text" />
</div>
</div>
<div class="row" style="padding-bottom : 10px">
<div class="col-lg-1 col-lg-offset-2">
<label class="control-label pull-right">And more:</label>
</div>
<div class="col-lg-2">
<input class="form-control" type="text" />
</div>
<div class="col-lg-1 col-lg-offset-2">
<label class="control-label pull-right">And more:</label>
</div>
<div class="col-lg-2">
<input class="form-control" type="text" />
</div>
</div>
</form>

Using v2.3.2, try this - edit offset as required
<form class="form-horizontal">
<div class="control-group row-fluid">
<div class="span1 offset1">
<label class="control-label pull-right" for="text">Text:</label>
</div>
<div class="controls span2" style="margin-left:80px">
<input type="text" id="text">
</div>
<div class="control-group">
<div class="span1 offset2">
<label class="control-label" for="text2">Text:</label>
</div>
<div class="controls span2" style="margin-left:80px">
<input type="text" id="text2">
</div>
</div>
</div>
<div class="control-group row-fluid">
<div class="span1 offset1">
<label class="control-label pull-right" for="textAnother">Text another one:</label>
</div>
<div class="controls span2" style="margin-left:80px">
<input type="text" id="textAnother">
</div>
<div class="control-group">
<div class="span1 offset2">
<label class="control-label" for="textAnother2">Text another one:</label>
</div>
<div class="controls span2" style="margin-left:80px">
<input type="text" id="textAnother2">
</div>
</div>
</div>
<div class="control-group row-fluid">
<div class="span1 offset1">
<label class="control-label pull-right" for="andMore">And more:</label>
</div>
<div class="controls span2" style="margin-left:80px">
<input type="text" id="andMore">
</div>
<div class="control-group">
<div class="span1 offset2">
<label class="control-label" for="andMore2">And more:</label>
</div>
<div class="controls span2" style="margin-left:80px">
<input type="text" id="andMore2">
</div>
</div>
</div>
</form>