locked
How to move input control to the center of the div RRS feed

  • Question

  • User-826336654 posted

    Hi All,

    I have a created a new asp.net mvc 5 application. In this application, I have Login screen as shown below. Everything is in the center except the input controls.

    Can somebody help me, how to move them to the middle? Screen shot and code is below.

    Note: I am using Bootstrap 3.

    Screen shot:

    View

    @model StudentLMS.Models.Account.LoginModel
    .
    @{
        ViewBag.Title = "Login";
        Layout = "/Views/Shared/SiteLayout.cshtml";
    }
    @using (Html.BeginForm())
    {
        @Html.AntiForgeryToken()
    
        <div class="formbox">
            <div class="form">
                <h2>Log In</h2>
                <p><b>login here using your username and password</b></p>
                <hr />
                @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    
                <div class="form-group">
                    @Html.LabelFor(model => model.UserName, htmlAttributes: new { @class = "control-label" })
                    <div class="input-group">
                        <span class="input-group-addon">
                            <span class="fa fa-user-circle"></span>
                        </span>
                        @Html.EditorFor(model => model.UserName, new { htmlAttributes = new { @class = "form-control", @placeholder = "Enter User Name here" } })
                    </div>
                    @Html.ValidationMessageFor(model => model.UserName, "", new { @class = "text-danger" })
                </div>
    
                <div class="form-group">
                    @Html.LabelFor(model => model.Password, htmlAttributes: new { @class = "control-label" })
                    <div class="input-group">
                        <span class="input-group-addon">
                            <span class="fa fa-key"></span>
                        </span>
                        @Html.EditorFor(model => model.Password, new { htmlAttributes = new { @class = "form-control", @placeholder = "Enter Password here" } })
                    </div>
                    @Html.ValidationMessageFor(model => model.Password, "", new { @class = "text-danger" })
                </div>
                <div class="form-group">
                    <label>@Html.EditorFor(model => model.RememberMe)</label>
                    @Html.LabelFor(model => model.RememberMe, htmlAttributes: new { @class = "control-label" })
                </div>
                <div class="btn-group">
                    <button type="submit" class="btn btn-primary"><i class="fas fa-sign-in-alt"></i> Sign In</button>
                </div>
            </div>
        </div>
    
    }
    
    

    _Layout:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>@ViewBag.Title - DawnCambridge High  School, Peshawar</title>
        <link href="~/Content/fontawesome/all.css" rel="stylesheet" />
        <link href="~/Content/bootstrap.css" rel="stylesheet" type="text/css" />
        <link href="~/Content/site/Site.css" rel="stylesheet" />
        <script src="~/Scripts/modernizr-2.8.3.js"></script>
    </head>
    <body>
    
        <div class="container">
            @RenderBody()
            <br/>
            <footer>
                <p>&copy; @DateTime.Now.Year - DawnCambridge High School, Peshawar</p>
            </footer>
        </div>
    
        <script src="~/Scripts/jquery-3.4.1.js"></script>
        <script src="~/Scripts/bootstrap.js"></script>
    </body>
    </html>

    CSS:

    body {
        padding-bottom: 20px;
        background-color: #CCD3D9 !important;
        color: #000000;
        text-align: center;
    }
    
    /* Set width on the form input elements since they're 100% wide by default */
    input,
    select,
    textarea {
        max-width: 280px;
    }
    
    .formbox {
        width: 60%;
        margin-top: 20px;
        margin-left: auto;
        margin-right: auto;
        background-color: white;
        padding-top: 0px;
        padding-bottom: 15px;
        border: 1px solid white;
        border-radius: 5px;
    }
    
    
    

    Thanks in advance.

    Tuesday, June 18, 2019 1:52 PM

Answers

  • User-826336654 posted

    I have eventually done it myself and it was easier than expected. the modified code is below.

    View:

    @model StudentLMS.Models.Account.LoginModel
    .
    @{
        ViewBag.Title = "Login";
        Layout = "/Views/Shared/SiteLayout.cshtml";
    }
    @using (Html.BeginForm())
    {
        @Html.AntiForgeryToken()
    
        <div class="formbox">
            <h2>Log In</h2>
            <img alt="Dawn Cambridgy High School" src="~/images/DawnCamLogo.jpg" width="160" height="160" />
            <div class="form">
                <p><b>login here using your username and password</b></p>
                <hr />
                @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    
    
                <div class="form-group">
                    @Html.LabelFor(model => model.UserName, htmlAttributes: new { @class = "control-label" })
                    <div class="centerblock">
                        <div class="input-group">
                            <span class="input-group-addon">
                                <span class="fa fa-user-circle"></span>
                            </span>
                            @Html.EditorFor(model => model.UserName, new { htmlAttributes = new { @class = "form-control", @placeholder = "Enter User Name here" } })
                        </div>
                        @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" })
                    <div class="centerblock">
                        <div class="input-group">
                            <span class="input-group-addon">
                                <span class="fa fa-key"></span>
                            </span>
                            @Html.EditorFor(model => model.Password, new { htmlAttributes = new { @class = "form-control", @placeholder = "Enter Password here" } })
                        </div>
                        @Html.ValidationMessageFor(model => model.Password, "", new { @class = "text-danger" })
                    </div>
                </div>
                <div class="form-group">
                    <label>@Html.EditorFor(model => model.RememberMe)</label>
                    @Html.LabelFor(model => model.RememberMe, htmlAttributes: new { @class = "control-label" })
                </div>
                <div class="btn-group">
                    <button type="submit" class="btn btn-primary"><i class="fas fa-sign-in-alt"></i> Sign In</button>
                </div>
            </div>
        </div>
    
    }
    
    

    CSS:

    body {
        padding-bottom: 20px;
        background-color: #CCD3D9 !important;
        color: #000000;
        text-align: center;
    }
    
    /* Set width on the form input elements since they're 100% wide by default */
    input,
    select,
    textarea {
        max-width: 280px;
    }
    
    .formbox {
        width: 60%;
        margin-top: 20px;
        margin-left: auto;
        margin-right: auto;
        background-color: white;
        padding-top: 0px;
        padding-bottom: 15px;
        border: 1px solid white;
        border-radius: 5px;
    }
    
    .centerblock {
        width: 250px;
        margin-left: auto;
        margin-right: auto;
    }
    
    

    Thanks all.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, June 18, 2019 3:04 PM

All replies

  • User475983607 posted

    Bootstrap has alignment classes.

    https://www.w3schools.com/bootstrap/bootstrap_ref_css_text.asp

    Make sure the markup is not restricting the layout.  Use your browser's dev tools to debug the markup.

    Tuesday, June 18, 2019 2:03 PM
  • User-826336654 posted

    Thanks the reply,

    But that link is about typography and It is working but with input controls, it doesn't. Anyone else please.

    thanks

    Tuesday, June 18, 2019 2:27 PM
  • User-826336654 posted

    I have eventually done it myself and it was easier than expected. the modified code is below.

    View:

    @model StudentLMS.Models.Account.LoginModel
    .
    @{
        ViewBag.Title = "Login";
        Layout = "/Views/Shared/SiteLayout.cshtml";
    }
    @using (Html.BeginForm())
    {
        @Html.AntiForgeryToken()
    
        <div class="formbox">
            <h2>Log In</h2>
            <img alt="Dawn Cambridgy High School" src="~/images/DawnCamLogo.jpg" width="160" height="160" />
            <div class="form">
                <p><b>login here using your username and password</b></p>
                <hr />
                @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    
    
                <div class="form-group">
                    @Html.LabelFor(model => model.UserName, htmlAttributes: new { @class = "control-label" })
                    <div class="centerblock">
                        <div class="input-group">
                            <span class="input-group-addon">
                                <span class="fa fa-user-circle"></span>
                            </span>
                            @Html.EditorFor(model => model.UserName, new { htmlAttributes = new { @class = "form-control", @placeholder = "Enter User Name here" } })
                        </div>
                        @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" })
                    <div class="centerblock">
                        <div class="input-group">
                            <span class="input-group-addon">
                                <span class="fa fa-key"></span>
                            </span>
                            @Html.EditorFor(model => model.Password, new { htmlAttributes = new { @class = "form-control", @placeholder = "Enter Password here" } })
                        </div>
                        @Html.ValidationMessageFor(model => model.Password, "", new { @class = "text-danger" })
                    </div>
                </div>
                <div class="form-group">
                    <label>@Html.EditorFor(model => model.RememberMe)</label>
                    @Html.LabelFor(model => model.RememberMe, htmlAttributes: new { @class = "control-label" })
                </div>
                <div class="btn-group">
                    <button type="submit" class="btn btn-primary"><i class="fas fa-sign-in-alt"></i> Sign In</button>
                </div>
            </div>
        </div>
    
    }
    
    

    CSS:

    body {
        padding-bottom: 20px;
        background-color: #CCD3D9 !important;
        color: #000000;
        text-align: center;
    }
    
    /* Set width on the form input elements since they're 100% wide by default */
    input,
    select,
    textarea {
        max-width: 280px;
    }
    
    .formbox {
        width: 60%;
        margin-top: 20px;
        margin-left: auto;
        margin-right: auto;
        background-color: white;
        padding-top: 0px;
        padding-bottom: 15px;
        border: 1px solid white;
        border-radius: 5px;
    }
    
    .centerblock {
        width: 250px;
        margin-left: auto;
        margin-right: auto;
    }
    
    

    Thanks all.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, June 18, 2019 3:04 PM