Button Horizontally inline with text boxes Razor View

Question

I Have the following form on a view

@using (Html.BeginForm("AddInterest", "Club", FormMethod.Post))
{
    @Html.AntiForgeryToken()
    <div class="form-horizontal">
        <hr />
        <div class="row">
            <div class="col-md-8">
                <div class="well bs-component">
                    <div class="form-group">
                        <div class="col-md-10 col-md-offset-1">
                            <h3>Not listed? - Add extras here</h3>
                        </div>
                    </div>
                    @Html.HiddenFor(model => model.ClubTypeId)
                    @Html.HiddenFor(model => model.ClubId)
                    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                    <div class="form-group">
                        <div class="row col-md-offset-1 col-md-11">
                            <div class="col-md-4">
                                @Html.LabelFor(model => model.InterestName, htmlAttributes: new { @class = "control-label" })
                                @Html.EditorFor(model => model.InterestName, new { htmlAttributes = new { @class = "form-control" } })
                                @Html.ValidationMessageFor(model => model.InterestName, "", new { @class = "text-danger" })
                            </div>
                            <div class="col-md-5">
                                @Html.LabelFor(model => model.Description, htmlAttributes: new { @class = "control-label" })
                                @Html.EditorFor(model => model.Description, new {  htmlAttributes = new { @class = "form-control" } })
                                @Html.ValidationMessageFor(model =>  model.Description, "", new { @class = "text-danger" })
                            </div>
                            <input type="submit" value="Add" class="btn btn- success" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
}

Everything is good apart from the submit button sits inline horizontally with the labels not the editor boxes, how can I get it to drop down?

i.e.

Label Label

Text Box Text Box Button

NOT

Label Label Button

Text Box Text Box

Its currently showing like this:

Solution

You should recreate your form following this pattern:

 <div class="form-group">
     @Html.LabelFor(model => model.InterestName, htmlAttributes: new { @class = "col-md-4 control-label" })
     <div class="col-md-8">
         @Html.EditorFor(model => model.InterestName, new { htmlAttributes = new { @class = "form-control" } })
         @Html.ValidationMessageFor(model => model.InterestName, "", new { @class = "text-danger" })
     </div>                          
  </div>
  <div class="form-group">
      @Html.LabelFor(model => model.Description, htmlAttributes: new { @class = "col-md-4 control-label" })
       <div class="col-md-8">
           @Html.EditorFor(model => model.Description, new {  htmlAttributes = new { @class = "form-control" } })
           @Html.ValidationMessageFor(model =>  model.Description, "", new { @class = "text-danger" })
       </div>
  </div>
  <div class="form-group">
      <div class="col-md-offset-4 col-md-8">
           <input type="submit" value="Add" class="btn btn-success" />
       </div>
  </div>

More information at http://getbootstrap.com/css/#forms-horizontal

Edit

If you want them inline vertically:

<form class="form-inline">
  <div class="form-group">
     @Html.LabelFor(model => model.InterestName)
     @Html.EditorFor(model => model.InterestName, new { htmlAttributes = new { @class = "form-control" } })
  </div>
  <div class="form-group">
    @Html.LabelFor(model => model.Description)
    @Html.EditorFor(model => model.Description, new {  htmlAttributes = new { @class = "form-control" } })
  </div>
  <input type="submit" value="Add" class="btn btn-success" />
</form>

More information at http://getbootstrap.com/css/#forms-inline

Edit 2

If you want them inline horizontally but in two columns and submit button aligned to the right:

<form>
    <div class="col-md-4">
        <div class="form-group">
            @Html.LabelFor(model => model.InterestName)
            @Html.EditorFor(model => model.InterestName, new { htmlAttributes = new { @class = "form-control" } })
        </div>
    </div>
    <div class="col-md-4">
         <div class="form-group">
            @Html.LabelFor(model => model.Description)
            @Html.EditorFor(model => model.Description, new {  htmlAttributes = new { @class = "form-control" } })
         </div>
    </div>
    <div class="col-md-4">
        <div class="form-group">
              <button type="submit" class="btn btn-default" style="margin-top: 25px;">Add</button>
        </div>
     </div>
</form>