bootstrap modal with asp.net mvc html helpers
<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>