Fields in the same line Bootstrap application MVC5

Question

Fields in the same line Bootstrap application MVC5

Navigation

#1 by (2 votes)
#2 by (2 votes)

3

I would like a hint of putting two fields on the same line in Razor, using the bootstrap in an ASP.NET MVC5 application.

div class="ibox-content">
                            <form role="form" class="form-inline">
                                <div class="form-group">
                                    @Html.LabelFor(model => model.Nm_EquipeMinima, new { @class = "control-label col-md-2" })
                                    <div class="col-md-6">
                                        @Html.EditorFor(model => model.Nm_EquipeMinima)
                                        @Html.ValidationMessageFor(model => model.Nm_EquipeMinima)
                                    </div>
                                </div>

                                <div class="form-group">
                                    @Html.LabelFor(model => model.Nr_EquipeMinima, new { @class = "control-label col-md-2" })
                                    <div class="col-md-6">
                                        @Html.EditorFor(model => model.Nr_EquipeMinima)
                                        @Html.ValidationMessageFor(model => model.Nr_EquipeMinima)
                                    </div>
                                </div>
                            </form>
                        </div class="ibox-content">

This is my code and below the result.

asp.net-mvc razor bootstrap

asked by anonymous 26.07.2016 / 21:15

2 answers

What's the difference and when to use Flexbox or CSS Grid? Can you have some error in foreach execution in this method?

score 2 · Answer 1

In Bootstrap, keep in mind that the whole space is divisible by 12 or multiples of 12.

When you do:

<div class="form-group">
    @Html.LabelFor(model => model.Nm_EquipeMinima, new { @class = "control-label col-md-2" })
    <div class="col-md-6">
        @Html.EditorFor(model => model.Nm_EquipeMinima)
        @Html.ValidationMessageFor(model => model.Nm_EquipeMinima)
    </div>
</div>

Your form-group occupies all 12 spaces. Its label occupies 2 spaces ( @class = "col-md-2" ) and its @Html.EditorFor occupies 6 spaces ( div class="col-md-6" ). There were still 4 spaces left to put something else on the line.

The way to do this is to put all components within the same form-group , like this:

<div class="form-group">
    @Html.LabelFor(model => model.Nm_EquipeMinima, new { @class = "control-label col-md-1" })
    <div class="col-md-5">
        @Html.EditorFor(model => model.Nm_EquipeMinima)
        @Html.ValidationMessageFor(model => model.Nm_EquipeMinima)
    </div>
    @Html.LabelFor(model => model.Nr_EquipeMinima, new { @class = "control-label col-md-1" })
    <div class="col-md-5">
        @Html.EditorFor(model => model.Nr_EquipeMinima)
        @Html.ValidationMessageFor(model => model.Nr_EquipeMinima)
    </div>
</div>

Notice that I have two label with col-md-1 and two div with col-md-5 . It would be 1 + 1 + 5 + 5 = 12. That is, I put all the fields on the same line occupying the 12 spaces available by the framework .

See an explanation about the grids system here .

score 2 · Answer 2

Erison, I made some minor changes to your html, where I added a div with class row and the divs where they were form-group I put col-md-6 , I believe this is enough in your case.

You can see better about using col-... in link

<div class="ibox-content">
    <form role="form" class="form-inline">
        <div class="row form-group">
            <div class="col-md-6">
                @Html.LabelFor(model => model.Nm_EquipeMinima, new { @class = "control-label col-md-2" })
                <div class="col-md-6">
                    @Html.EditorFor(model => model.Nm_EquipeMinima)
                    @Html.ValidationMessageFor(model => model.Nm_EquipeMinima)
                </div>
            </div>

            <div class="col-md-6">
                @Html.LabelFor(model => model.Nr_EquipeMinima, new { @class = "control-label col-md-2" })
                <div class="col-md-6">
                    @Html.EditorFor(model => model.Nr_EquipeMinima)
                    @Html.ValidationMessageFor(model => model.Nr_EquipeMinima)
                </div>
            </div>
        </div>
    </form>
</div>