need a fix for bootstrap forms - html

Question

I am trying to create a form with bootstrap where I am trying to fill two fields in two column of same row and third field in another row with same width as above row. but some how the third field is not occupying the entire row width as the above field.
<div class="container">
<h2 class="form-page">PLEASE, ENTER YOUR DETAILS</h2>
<br>
<form>
<div class="row">
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-7">
<div class="row">
<div class="col-lg-1 col-md-2 col-sm-3 col-xs-3">
<label>Name</label>
</div>
<div class="col-lg-11 col-md-10 col-sm-9 col-xs-9">
<input type="text">
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-5">
<div class="row">
<div class="col-lg-2 col-md-3 col-sm-3 col-xs-3">
<label>Phone</label>
</div>
<div class="col-lg-10 col-md-9 col-sm-9 col-xs-9">
<input type="text">
</div>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="row">
<div class="col-lg-1 col-md-2 col-sm-3 col-xs-4">
<label>Email</label>
</div>
<div class="col-lg-11 col-md-10 col-sm-9 col-xs-8">
<input type="email">
</div>
</div>
</div>
</div>
Here is my jsfiddle
I am trying to display name and phone fields on same row, where as email to take up the entire row below name and phone fields. but email field is not taking the entire row.

Answer 1

I think you're trying to do this.
#media (min-width: 767px) {
#soForm .soForm {
margin: 10px auto;
}
#soForm .control-label {
margin-top: 10px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<h2 class="form-page">PLEASE, ENTER YOUR DETAILS</h2>
</br>
<form id="soForm" name="soForm">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">Name</label>
<div class="col-sm-4 soForm">
<input type="text" class="form-control" id="name" />
</div>
</div>
<div class="form-group">
<label for="phone" class="col-sm-2 control-label">Phone</label>
<div class="col-sm-4 soForm">
<input type="text" class="form-control" id="phone" />
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="email" />
</div>
</div>
</form>
</div>