[RESOLVED] MVC: Bootstrap Form in View

[BrailleSchool]

I am trying so hard to bootstrap the registration form in an MVC application and the email address field is not going to full width. Been searching all night and have not been able to get this to work so far. Any ideas?

This is the code for the form:

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-md-8">
            <div class="panel panel-primary box-shadow">
                <div class="panel-heading">
                    <hgroup>
                        <h3 class="panel-title">Register Account</h3>
                    </hgroup>
                </div>

                <div class="panel-body">
                    <div class="container">
                        @using (Html.BeginForm("Register", "Account", FormMethod.Post, new { role = "form" }))
                        {
                            @Html.AntiForgeryToken()
                            @Html.ValidationSummary(false, "Please correct the following issues and try again:", new { @class = "alert alert-danger", role = "alert" })

                            <div class="panel panel-primary">
                                <div class="panel-heading">
                                    <hgroup>
                                        <h3 class="panel-title">Your Name</h3>
                                    </hgroup>
                                </div>

                                <div class="panel-body">
                                    <div class="container">
                                        <div class="col-xs-12 col-md-4">
                                            <div class="input-group">
                                                <span class="input-group-addon"><i class="glyphicon glyphicon-user" aria-hidden="true"></i></span>
                                                @Html.LabelFor(m => m.FirstName, new { @class = "sr-only form-label" })
                                                @Html.TextBoxFor(m => m.FirstName, new { placeholder = "First Name", tabindex = "1", @class = "form-control input-md" })
                                            </div>
                                        </div>

                                        <div class="col-xs-12 col-md-4">
                                            <div class="input-group">
                                                <span class="input-group-addon"><i class="glyphicon glyphicon-user" aria-hidden="true"></i></span>
                                                @Html.LabelFor(m => m.MiddleName, new { @class = "sr-only form-label" })
                                                @Html.TextBoxFor(m => m.MiddleName, new { placeholder = "Middle Name", tabindex = "2", @class = "form-control input-md" })
                                            </div>
                                        </div>

                                        <div class="col-xs-12 col-md-4">
                                            <div class="input-group">
                                                <span class="input-group-addon"><i class="glyphicon glyphicon-user" aria-hidden="true"></i></span>
                                                @Html.LabelFor(m => m.LastName, new { @class = "sr-only form-label" })
                                                @Html.TextBoxFor(m => m.LastName, new { placeholder = "Last Name", tabindex = "3", @class = "form-control input-md" })
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="panel panel-primary">
                                <div class="panel-heading">
                                    <hgroup>
                                        <h3 class="panel-title">Login Credentials</h3>
                                    </hgroup>
                                </div>

                                <div class="panel-body">
                                    <div class="container">
                                        <fieldset class="form-group">
                                            <div class="row">
                                                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                                                    <div class="input-group">
                                                        <span class="input-group-addon"><i class="glyphicon glyphicon-envelope" aria-hidden="true"></i></span>
                                                        @Html.LabelFor(m => m.EmailAddress, new { @class = "sr-only form-label" })
                                                        @Html.TextBoxFor(m => m.EmailAddress, new { placeholder = "Email Address", tabindex = "4", @class = "form-control input-md" })
                                                    </div>
                                                </div>
                                            </div>
                                        </fieldset>

                                        <div class="row">
                                            <div class="col-xs-12 col-md-6">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="glyphicon glyphicon-lock" aria-hidden="true"></i></span>
                                                    @Html.LabelFor(m => m.Password, new { @class = "sr-only form-label" })
                                                    @Html.PasswordFor(m => m.Password, new { placeholder = "Password", tabindex = "5", @class = "form-control input-md" })
                                                </div>
                                            </div>

                                            <div class="col-xs-12 col-md-6">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="glyphicon glyphicon-lock" aria-hidden="true"></i></span>
                                                    @Html.LabelFor(m => m.ConfirmPassword, new { @class = "sr-only form-label" })
                                                    @Html.PasswordFor(m => m.ConfirmPassword, new { placeholder = "Confirm Password", tabindex = "6", @class = "form-control input-md" })
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <button type="submit" class="btn btn-primary" title="Register">
                                <span class="fa fa-thumbs-o-up" aria-label="Register"> Register</span>
                            </button>
                        }
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

This is how the form is displaying. I am trying to get the email address input to full width.