bootstrap form alignment with multiple controls

Question

Hello all I am having my design as follows in my html

@model PPM.Models.ProjectModel
<div class="panel-heading panel-head">Create New Project</div>
<br />
<div class="container">
    <div class="form-horizontal">
        @using (Ajax.BeginForm("Invite", "Invite", null, new AjaxOptions() { HttpMethod = "post", LoadingElementId = "divLoading", OnSuccess = "getresult" }, null))
        {
            <div class="form-group">
                <label for="ProjectName" class="col-sm-4">Project Name</label>
                @Html.EditorFor(model => model.ProjectName, "", new { htmlAttributes = new { @class = "form-control", @placeholder = "Project Name" } })
                @Html.ValidationMessageFor(model => model.ProjectName, "", new { @class = "text-danger" })
            </div>
            <div class="form-group">
                <label for="ManagerId" class="col-sm-4">Project Manager</label>
                @Html.DropDownListFor(Model => Model.ManagerId, Model.ManagerList, "--SELECT--", new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.ManagerId, "", new { @class = "text-danger" })
            </div>
            <div class="control-group">
                <label for="Duration">Duration </label>
                @Html.EditorFor(model => model.Duration, "", new { htmlAttributes = new { @class = "form-control", @placeholder = "Duration" } })
                @Html.ValidationMessageFor(model => model.Duration, "", new { @class = "text-danger" })
                @Html.DropDownListFor(Model => Model.DurationId, Model.DurationTypes, "--SELECT--", new { @class = "form-control input-xs" })
                @Html.ValidationMessageFor(model => model.DurationId, "", new { @class = "text-danger" })
            </div>
            <div class="form-group">
                <label for="NoOfResources" class="col-sm-4">No Of Resources</label>
                @Html.EditorFor(model => model.NoOfResourses, "", new { htmlAttributes = new { @class = "form-control", @placeholder = "Number of resources" } })
            </div>
            <div class="form-group">
                <label for="StartDate" class="col-sm-4">Start Date</label>
                @Html.EditorFor(model => model.StartDate, "", new { htmlAttributes = new { @class = "form-control", @placeholder = "Number of resources" } })
            </div>
            <div class="form-group">
                <label for="EndDate" class="col-sm-4">End Date</label>
                @Html.EditorFor(model => model.EndDate, "", new { htmlAttributes = new { @class = "form-control", @placeholder = "Number of resources" } })
            </div>
        }
    </div>
</div>

I am getting form as expected but I am unable to align one control inline. can some one help me. I would like to see them in one line

Jogaklaa · Accepted Answer · 2018-02-20 13:13:11Z

1

It looks like you aren't using columns for the 'Duration' label so what you have is:

<label for="Duration">Duration </label>

When it should be: <label for="Duration" class="col-sm-4">Duration </label>

like the rest of your labels.

answered Feb 20, 2018 at 13:13

Jogaklaa

461 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Developer Over a year ago

If I made that my select is coming down to Duration

Jogaklaa Over a year ago

In that case, have you tried messing with Bootstrap's row and col-sm-offset-x (where x is the number of columns) to get it aligned?

Developer Over a year ago

I didn't get you can I have a fiddle

Jogaklaa Over a year ago

Sorry it took a while but here is a link to one that works for what you're wanting.

Developer Over a year ago

I want the controls to be aligned next to each other

|

Collectives™ on Stack Overflow

bootstrap form alignment with multiple controls

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related