How do I change the MVC Bootstrap layout to have m

Question

I have used the Scaffolded in MVC5 and it created the standard default single column layout for the form. Some forms are just too long to be single column, so I wanted to modify it into multiple columns as shown in the picture. I have been messing around with, form-group, row, col-md-*, form-inline...but the formatting is misaligned one way or another.

The solution has to be pretty simple with the right combination of css tags and works with the MVC framework.

The scaffolded standard layout and css

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

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

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

Can someone please provide a an example of the name, email and website for the comment form as shown that works with the data bind from the view.?

Thanks

@zgood - your answer works with a slight issue, not sure if you know how to fix it.

• I moved the label inside the div with the other text boxes and deleted the horizontal and inline as mentioned
• when you expand it a certain way, the labels with more than one words are mis-aligned. It's ok if it's just one word though. Is there a quick fix for that? thanks for the answer.

Answer 1

Have you tried something like this?

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

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

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

Wrap all the fields you want in a <div class="row"> then create the col-'s you want (<div class="col-sm-4"> in this case) and place your form-groups inside those columns. Also, I would probably remove any form-horizontal or form-inline bootstrap classes from your <form>