Click here to Skip to main content
15,507,147 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
Hi Team

I want to create an input-group on my form. That will allow textbox be align right, that is "FirstName and LastName". See my logic what i have attempted, they are distant to each other on a new line.

What I have tried:

@using eNtsaRegistrationTraining.Models
@model EditTrainingRegFormViewModel

@{
    ViewBag.Ttile = "Dashboard";
    Layout = "~/Views/Shared/_HomeLayout.cshtml";
}
<center>
    <div class="register-box ">
        <div class="register-logo">

        </div>

        <div class="card">
            <div class="card-body register-card-body">
                <center>
                    <img src="~/Images/eNtsa.png" />
                </center>
                <center>
                    <p>Training Course Registration:Motion MasterClass</p>
                    <hr />
                    <p>Course date: 25-27 February 2020</p>
                    <hr />
                    <p>
                        Note:Please note your registration is submit approval as seats for this course is limited. Once your registration is confirmed, you will receive a quote for subject to your confirmation
                        followed by an invoice.
                    </p>
                </center>
                <hr />
                @using (Html.BeginForm("editRegForm", "Home", FormMethod.Post, new { @role = "form" }))
                {
                    @Html.AntiForgeryToken()
            <div class="row">
                <label for="Title"> Title: </label>
                <div class="input-group col-md-6 col-md-offset-8 col-sm-10 col-xs-10">
                    <div class="input-group pull-left">
                        @Html.TextBoxFor(m => m.Title, new { @class = "form-control", type = "text", id = "title", autofocus = "autofocus", placeholder = "Title", required = "required" })
                        <div class="input-group-append">
                            <div class="input-group-text">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
                    <hr />
                    <div class="row">
                        <label for="Name">Name:</label>
                        <div class="input-group col-md-6 col-md-offset-8 col-sm-10 col-xs-10">
                            <div class="input-group pull-left">
                                @Html.TextBoxFor(m => m.FirstName, new { @class = "form-control", type = "text", id = "firstname", autofocus = "autofocus", placeholder = "First Name", required = "required" })
                                <div class="input-group-append">
                                    <div class="input-group-text">

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <hr/>

                    <div class="row">
                     <label for="LastName">LastName:</label>
                      <div class="input-group col-md-6 col-md-offset-8 col-sm-10 col-xs-10">
                            <div class="input-group pull-left">
                                @Html.TextBoxFor(m=>m.LastName, new {@class = "form-control", type="text", id="lastname", autofocus = "autofocus", placeholder = "Last Name", required = "required"})
                                <div class="input-group-append">
                                    <div class="input-group-text">

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                }
            </div>
            </div>
        </div>
</center>
Posted
Updated 17-Mar-20 1:36am

1 solution

Add class="col-form-label col-xs-2 col-md-6" to each of your labels.

Remove col-md-offset-8 from your input-group elements.

You can also remove the col-sm-6, since you already have col-xs-6 on the same element.

Remove pull-left from the input-group elements.

You'll also want to remove the autofocus attribute from all but the first textbox.
HTML
<div class="row">
    <label for="Title" class="col-form-label col-xs-2 col-md-6"> Title: </label>
    <div class="input-group col-md-6 col-xs-10">
        <div class="input-group">
            @Html.TextBoxFor(m => m.Title, new { @class = "form-control", type = "text", id = "title", autofocus = "autofocus", placeholder = "Title", required = "required" })
            <div class="input-group-append">
                <div class="input-group-text">
                </div>
            </div>
        </div>
    </div>
</div>
Demo[^]
Grid system · Bootstrap[^]
Form grid - Forms · Bootstrap[^]
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900