title: Bootstrap display of Form
body: <p>This is not making sense to me.  I am trying to display a form on my MVC5 project  with 4 input fields.  When i am not using the @using (HTML.BeginForm(...){..} </p>
  
  <blockquote>
    <p>@using (Html.BeginForm("Create", "HR", FormMethod.Post))
    { </p>
  </blockquote>
  
  <p>my display looks perfect <a href="https://i.stack.imgur.com/Y8CCl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Y8CCl.png" alt="enter image description here"></a></p>
  
  <p>but once i put in the @using (HTML.BeginForm(..) statement, then the display looks like this:
  <a href="https://i.stack.imgur.com/bU0bn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bU0bn.png" alt="enter image description here"></a></p>
  
  <p>Where am I going wrong in my html helper ?</p>
  
  <p>Here are some sample html helper methods i am using..</p>
  
  <pre><code>&lt;div class="panel-group"&gt;
  &lt;div class="panel panel-primary"&gt;
      &lt;div class="panel-heading"&gt;&lt;h4&gt;Create New Employee&lt;/h4&gt;&lt;/div&gt;
      &lt;div class="panel-body"&gt; 
          &lt;form class="form-horizontal"&gt;
       &lt;div class="form-group"&gt;
                      &lt;label class="control-label col-sm-2"&gt;First Name&lt;/label&gt;
                      &lt;div class="col-sm-10"&gt; 
                          @Html.TextBoxFor(m =&gt; m.FirstName, new { @class = "form-control", placeholder = "Enter First Name" })
                      &lt;/div&gt;
               &lt;/div&gt;
       &lt;div class="form-group"&gt;
                      &lt;label class="control-label col-sm-2" for="pwd"&gt;Middle Name&lt;/label&gt;
                      &lt;div class="col-sm-10"&gt; 
                          @Html.TextBoxFor(m =&gt; m.MiddleName, new { @class = "form-control", placeholder = "Enter Middle Name" })
                      &lt;/div&gt;
               &lt;/div&gt;
       &lt;/form&gt; 
    &lt;/div&gt;
     &lt;/div&gt; 
  </code></pre>
  
  <p> </p>