Fields in the same line MVC5 Application Bootstrap

Question

I would like a tip on how to put two fields on the same line in Razor, using 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.

Answer 1

In Bootstrap, keep in mind that all 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 the 12 spaces. Your label occupies 2 spaces (@class = "col-md-2") and your @Html.EditorFor occupies 6 spaces (div class="col-md-6"). There would still be 4 spaces left to put something else on the line.

The way to do this is by putting all the components inside the same form-group, thus:

<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 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 fields on the same line occupying the 12 spaces available by framework.

See an explanation of the grids system here.

Answer 2

Erison, I made some small changes to your html, where I added a div with class row and the Ivds where they were form-group placed col-md-6, I believe that’s enough in your case.

You can see better about the use of col-... in the 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>