Trying to get 2 form fields next to each other (inline) using bootstrap 3 in MVC5 razor

Question

I am trying to get WorkPhone and WorkPhone Extension side by side and aligned perfectly under the above field which spans the entire width of the column. This somewhat works but the extension field extends too far out to the right. The ideal scenario would be for it to look like this:

Work Phone
[textbox] ext [textbox]

Here is what I have:

<div class="form-group">
    <div class="row">
        <div class="col-md-8">
            @Html.LabelFor(model => model.WorkPhone, htmlAttributes: new { @class = "control-label" })
            @Html.EditorFor(model => model.WorkPhone, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.WorkPhone, "", new { @class = "text-danger" })
        </div>
        <div class="col-md-4">
            @Html.LabelFor(model => model.WorkPhoneExt, htmlAttributes: new { @class = "control-label" })
            @Html.EditorFor(model => model.WorkPhoneExt, new { htmlAttributes = new { @class = "form-control" } })
        </div>
    </div>
</div>

Answer 1

I know this is a late reply and just ran across this post. Hopefully you have figured this out, I am posting the answer in case others need to use this.

In your <div class="form-group"> you need to add the form-inline class as follows.<div class="form-group form-inline"> and move this into the the row like this.
<div class="row"> <div class="col-md-offset-1 col-md-12"> <div class="form-group form-inline">
Also need to remove the <div class="col-md-8"> and <div class="col-md-4"> sections so you can get them close together.
Here is an Example:

<div class="row">
  <div class="col-md-offset-1 col-md-12">
    <div class="form-group form-inline">
      @Html.LabelFor(model => model.WorkPhone, htmlAttributes: new { @class = "control-label" })
      @Html.EditorFor(model => model.WorkPhone, new { htmlAttributes = new { @class = "form-control", @style = "width:200px" } }) 
      @Html.ValidationMessageFor(model => model.WorkPhone, "", new { @class = "text-danger" }) 
      @Html.LabelFor(model => model.WorkPhoneExt, htmlAttributes: new { @class = "control-label" }) 
      @Html.EditorFor(model => model.WorkPhoneExt, new { htmlAttributes = new { @class = "form-control", @style = "width:75px" } })
    </div>
  </div>
</div>

I myself like to place the Labels above the boxes as the Text is smaller than the new form-control class and the text box is much bigger than the label text. I do this with the col-md-12 class added to the label class .
Here is the code for that.

<div class="row">
                <div class="col-md-3">
                    <div class="form-group">
                        @Html.LabelFor(model => model.WorkPhone, htmlAttributes: new { @class = "control-label col-md-12" })
                        @Html.EditorFor(model => model.WorkPhone, new { htmlAttributes = new { @class = "form-control", @style = "width:200px" } })
                        @Html.ValidationMessageFor(model => model.WorkPhone, "", new { @class = "text-danger" })
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        @Html.LabelFor(model => model.WorkPhoneExt, htmlAttributes: new { @class = "control-label col-md-12" })
                        @Html.EditorFor(model => model.WorkPhoneExt, new { htmlAttributes = new { @class = "form-control", @style = "width:75px" } })
                        @Html.ValidationMessageFor(model => model.WorkPhoneExt, "", new { @class = "text-danger" })
                    </div>
                </div>
            </div>

Hope this helps someone.