Bootstrap two column layout for MVC create view - asp.net-mvc

Question

I have scaffolded a standard create view for one of my forms using MVC bootstrap. This form however has too many input fields to have in a single column layout, its just too long and seems daft to waste the white space to the right.
I've had a look at this question and tried to get it working with my form with not much luck.
In a nutshell I want the address fields to be on the right, in line with all the other fields.
Razor Snippet
<div class="row">
<div class="col-sm-4">
<div class="form-group">
#Html.LabelFor(model => model.SiteNumber, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.SiteNumber, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.SiteNumber, "", new { #class = "text-danger" })
</div>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
#Html.LabelFor(model => model.AddressLineOne, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.AddressLineOne, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.AddressLineOne, "", new { #class = "text-danger" })
</div>
</div>
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.SiteName, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.SiteName, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.SiteName, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Department, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Department, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Department, "", new { #class = "text-danger" })
</div>
</div>
So AddressLineOne should be on the same row as SiteNumber, AddressLineTwo should be on the same rowas SiteName and so on and so forth.
This is what I get with the above attempt for the first row:
And this is what I want:
How do I achieve this, whilst keeping the labels and standard spacing to the left.

Answer 1

This is what you want.
.clearfix{
clear: both;
padding: 0;
margin: 0;
height: 5px;
display: block;}
<div class="row">
<div class="col-md-6">
<div class="form-group">
#Html.LabelFor(model => model.SiteNumber, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.SiteNumber, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.SiteNumber, "", new { #class = "text-danger" })
</div>
</div>
<div class="clearfix"></div>
<div class="form-group">
#Html.LabelFor(model => model.SiteName, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.SiteName, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.SiteName, "", new { #class = "text-danger" })
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
#Html.LabelFor(model => model.AddressLineOne, htmlAttributes: new { #class = "control-label col-md-3" })
<div class="col-md-9">
#Html.EditorFor(model => model.AddressLineOne, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.AddressLineOne, "", new { #class = "text-danger" })
</div>
</div>
<div class="clearfix"></div>
<div class="form-group">
#Html.LabelFor(model => model.Department, htmlAttributes: new { #class = "control-label col-md-3" })
<div class="col-md-9">
#Html.EditorFor(model => model.Department, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Department, "", new { #class = "text-danger" })
</div>
</div>
</div>
</div>
</div>

Answer 2

Basically
<div class="row">
<div class="col-md-6"> <!-- Adjust this to be sm/md/lg, whatever fits best for you -->
<div class="form-group">
#Html.LabelFor(model => model.SiteNumber, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.SiteNumber, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.SiteNumber, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.SiteName, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.SiteName, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.SiteName, "", new { #class = "text-danger" })
</div>
</div>
<!-- Continue your first column of form groups here -->
</div>
<div class="col-md-6"> <!-- Adjust this to be sm/md/lg, whatever fits best for you-->
<div class="form-group">
#Html.LabelFor(model => model.AddressLineOne, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.AddressLineOne, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.AddressLineOne, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.AddressLineTwo, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.AddressLineTwo, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.AddressLineTwo, "", new { #class = "text-danger" })
</div>
</div>
<!-- Continue your second column of form groups here -->
</div>
</div>

Answer 3

For me it was enough to do it like this:
<div class="form-group">
#Html.LabelFor(model => model.LOA_ID, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-3">
#Html.EditorFor(model => model.LOA_ID, new { htmlAttributes = new { #class = "form-control", #readonly = "readonly" } })
#Html.ValidationMessageFor(model => model.LOA_ID, "", new { #class = "text-danger" })
</div>
#Html.LabelFor(model => model.LI_ID, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-3">
#Html.EditorFor(model => model.LI_ID, new { htmlAttributes = new { #class = "form-control", #readonly = "readonly" } })
#Html.ValidationMessageFor(model => model.LI_ID, "", new { #class = "text-danger" })
</div>
</div>