How can I line up this button with the textboxes? - html

Question

I would like the left side of the button flush with the textboxes. I'm using bootstrap 3 if that makes a difference. Here is my html code for the form. I can add my CSS if that's necessary as well. Thank you.
h1 {
font-size:83px;
}
.btn-primary {
background: #ffffff;
border-color: #ffffff;
color: #f05324;
}
.btn-default, .btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default {
background: #ffffff;
border-color: #ffffff;
color: #f05324;
}
.panel-default {
border: none;
}
input[type="text"] {
color:white !important;
}
input[type="email"] {
color:white !important;
}
.model-content {
color:black !important;
}
.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.text-center {
text-align: center;
}
.navbar-default {
background-color: #000000;
}
body {
background: #f05324 !important;
margin-bottom: 80px;
color: #ffffff;
}
.page-header, .panel-body, .panel, .panel-default, .col-lg-9, .row {
background: #f05324 !important;
}
.form-control{
background-color: #f05324;
color: #000000;
}
hr {
border-color: #ffffff;
background-color: #ffffff;
color: #ffffff;
}
.link {
color: #ffffff;
}
.page-header {
margin-top: 0;
}
.panel-body {
padding-top: 0;
}
.img-featured {
margin-top : 15px;
margin-bottom: 15px;
margin-right : 15px;
}
.img-project{
margin-top : 15px;
margin-bottom: 15px;
}
.show-onclick {
display: none;
}
.show-onclick1 {
display: none;
}
.block {
position: absolute;
top: 0;
bottom: 0;
left: 50%;
margin-left: // half the width of your img
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<form class="form-horizontal" method="post" action="submit.php" enctype="multipart/form-data">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">NAME:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" name="name">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">EMAIL:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="email" name="email">
</div>
</div>
<div class="form-group">
<label for="phoneNumber" class="col-sm-2 control-label">PHONE:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="phone" name="phone">
</div>
</div>
<div class="form-group">
<label for="major" class="col-sm-2 control-label">MAJOR:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="major" name="major">
</div>
</div>
<hr>
<div class="form-group">
<label for="itemForSale" class="col-sm-2 control-label">ITEM FOR SALE:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="itemForSale1" name="itemForSale1">
</div>
</div>
<div class="form-group">
<label for="quantity" class="col-sm-2 control-label">QUANTITY:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="quantity1" name="quantity1">
</div>
</div>
<div class="form-group">
<label for="price1" class="col-sm-2 control-label">PRICE:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="price1" name="price1">
</div>
</div>
<div class="form-group">
<label for="itemOneImg1" class="col-sm-2 control-label">IMAGE 1:</label>
<div class="col-sm-10">
<input type="file" accept=".jpg, .jpeg, .png" class="form-control" name="itemOneImg1">
</div>
</div>
<div class="form-group">
<label for="itemOneImg2" class="col-sm-2 control-label">IMAGE 2:</label>
<div class="col-sm-10">
<input type="file" accept=".jpg, .jpeg, .png" class="form-control" name="itemOneImg2">
</div>
</div>
<input id="additional-files" type="button" value="Additional Projects" class="btn btn-default">
</form>

Answer 1

If you want the left edge of the button to match up with the left edge of the text boxes then you just need to add an offset using the Bootstrap grid as follows:
<form class="form-horizontal" method="post" action="submit.php" enctype="multipart/form-data">
...
<div class="form-group">
<label for="itemOneImg2" class="col-sm-2 control-label">IMAGE 2:</label>
<div class="col-sm-10">
<input type="file" accept=".jpg, .jpeg, .png" class="form-control" name="itemOneImg2">
</div>
</div>
<div class="form-group">
<!-- Adjust col-sm-X for the buttons to adjust their positioning
Could also add btn-block class to make the button span the column -->
<div class="col-sm-offset-2 col-sm-9">
<input id="additional-files" type="button" value="Additional Projects" class="btn btn-default">
</div>
<div class="col-sm-1">
<input id="submit" type="button" value="Submit" class="btn btn-default">
</div>
</div>
</form>
More details (and another example) can be found on the Bootstrap website: http://getbootstrap.com/css/#forms-horizontal
EDIT: Based on additional information in comments.