https://i.sstatic.net/ODkgE.png
Is there a way to align the left side of the button with the textboxes in my form? I'm using bootstrap 3 for this. Here is the HTML code for my form. I can provide the CSS if needed. Thanks.
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>