title: bootstrap modal with asp.net mvc html helpers
body: <p>I am trying to implement bootstrap ui modal in asp.net mvc. I created a basic modal which contains a login form.
  Issue I am facing here is, when I start using html helpers, styles of the modal form is going really bad. I have attached screenshots below. one screenshot with when I don't use HTML helpers and that's when UI is more clean to view, when I add html helpers, style is going way off.</p>
  
  <p>I have tried pretty much everything I can. I am unable to spot the issue. can someone please have a look at it and throw a light on where I am going wrong. </p>
  
  <pre><code>        &lt;div&gt;
              @using(Html.BeginForm()){
                  &lt;div class="modal-header modal-hd-bg"&gt;
                      &lt;button type="button" class="close" ng-click="cancel()"&gt;×&lt;/button&gt;
                      &lt;h3 class="modal-title"&gt;Login&lt;/h3&gt;
                  &lt;/div&gt;        
  
                  &lt;div class="modal-body"&gt;
                      &lt;form novalidate class="form-horizontal" role="form"&gt;
                          &lt;div class="form-group"&gt;
                              @*&lt;label class="control-label col-sm-3" for="email"&gt;Email:&lt;/label&gt;*@
                              @Html.Label("Email:", new { @class="control-label col-sm-3"})
                              &lt;div class="col-sm-9"&gt;
                                 @* &lt;input type="email" class="form-control" id="email" placeholder="Enter email" ng-model="luser.email"&gt;*@
                                  @Html.TextBoxFor(m =&gt; m.email, new { @class="form-control", @placeholder="Enter Email", @id="email" })
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="form-group"&gt;
                              @*&lt;label class="control-label col-sm-3" for="pwd"&gt;Password:&lt;/label&gt;*@
                               @Html.Label("Password:", new { @class="control-label col-sm-3"})
                              &lt;div class="col-sm-9"&gt;          
                                  @*&lt;input type="password" class="form-control" id="pwd" placeholder="Enter password" ng-model="luser.pwd"&gt;*@
                                  @Html.TextBoxFor(m =&gt; m.pwd, new { @class="form-control", @placeholder="Enter password", @id="pwd" })
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="form-group"&gt;        
                              &lt;div class="col-sm-offset-3 col-sm-9"&gt;
                                  &lt;button type="submit" class="btn btn-primary" ng-click="login()"&gt;Login&lt;/button&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/form&gt;
                  &lt;/div&gt;        
  
                  &lt;div class="modal-footer modal-ft-bg"&gt;
                      &lt;label&gt;&lt;u&gt;Don't have an account&lt;/u&gt;?&lt;/label&gt;
                      &lt;button class="btn btn-success" ng-click="goToRegister()"&gt;Register&lt;/button&gt;
                  &lt;/div&gt;
  
  
              }
      &lt;/div&gt;
  </code></pre>
  
  <p><a href="http://i.stack.imgur.com/OcOeW.png" rel="nofollow">This is when I use @using(Html.BeginForm()) and html helpers</a></p>
  
  <p><a href="http://i.stack.imgur.com/DRVOY.png" rel="nofollow">This is when I don't use HTML helpers)</a></p>