How to show User login in center of page include all controls?

Question

Problem

How to display user login on center of page ?

Details

User login data display on left

Actually i need to display user login data on center of page .

This include labels for user name and password and checkbox and label remember

and user login title and button submit and text box for user name and password

meaning move all to center .

@model BookingPrograms.UsersLogin

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Login</title>
</head>
<body>
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jqueryval")


    @using (Html.BeginForm()) 
    {
        @Html.AntiForgeryToken()

        <div class="form-horizontal">
            <h4>UsersLogin</h4>
            <hr />
            @Html.ValidationSummary(true, "", new { @class = "text-danger" })
            <div class="form-group">
                @Html.LabelFor(model => model.UserName, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.UserName, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.UserName, "", new { @class = "text-danger" })
                </div>
            </div>



            <div class="form-group">
                @Html.LabelFor(model => model.Password, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Password, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Password, "", new { @class = "text-danger" })
                </div>
            </div>
            <div class="form-group">
                @Html.LabelFor(model => model.Remeber, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    <div class="checkbox">
                        @Html.EditorFor(model => model.Remeber)
                        @Html.ValidationMessageFor(model => model.Remeber, "", new { @class = "text-danger" })
                    </div>
                </div>
            </div>


            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <input type="submit" value="Login" class="btn btn-default" />
                </div>
            </div>
        </div>
    }

    <div>
        @Html.ActionLink("Back to List", "Index")
    </div>
</body>
</html>

fortunee fortunee · Accepted Answer · 2017-07-03T01:48:03

Using a custom style you can achieve this by setting a few rules to the form's class like this. But please add and use a different class instead of the bootstrap form-horizontal class.

.form-horizontal { margin: 0 25px; // margin-top 0 while the right and left to 25px text-align: center; // This centers the button, texts and the rest. }

Try this and let me know what you get.

How to show User login in center of page include all controls?

1 Answers