Bootstrap two column layout for MVC create view

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>