How to get rows of a form to display horizontally in Razor Pages

Question

I'm currently creating a web app using Razor Pages. I scaffolded the "Project" Model by clicking on "Razor Pages using Entity Framework (CRUD)" which automatically created a "Create", "Edit", "Delete", and "Details" page for my model. However, on my "Create" page it displays like this:

Create Fields Displaying Vertically:

I have a many properties, so this page gets very long and requires a lot of scrolling. Is there a way to make the fields display horizontally something like this:

Create Fields Displaying Horizontally:

I saw a few examples of how to edit the HTML file to achieve this, but I'm new to HTML and because of the automatically generated code I don't know what I need to change. Here's a snippet of the code:

<div class="row">
    <div class="col-md-4">
        <form method="post">

            <b>General:</b>

            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="Project.projectID" class="control-label"></label>
                <input asp-for="Project.projectID" class="form-control" />
                <span asp-validation-for="Project.projectID" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Project.projectName" class="control-label"></label>
                <input asp-for="Project.projectName" class="form-control" />
                <span asp-validation-for="Project.projectName" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Project.projectManager" class="control-label"></label>
                <input asp-for="Project.projectManager" class="form-control" />
                <span asp-validation-for="Project.projectManager" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Project.projectClient" class="control-label"></label>
                <input asp-for="Project.projectClient" class="form-control" />
                <span asp-validation-for="Project.projectClient" class="text-danger"></span>
            </div>
        </form>
    </div>
</div>

Any ideas of how to change the code so my input fields display horizontally?

Answer 1

By default the Asp.net core Application using Bootstrap style, so, you could try to change the code as below:

<h4>General:</h4> 
<hr />
<div class="row">
    <div class="col-md-12">
        <form method="post">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group row">
                        <label asp-for="Project.projectID" class="control-label col-md-3"></label>
                        <input asp-for="Project.projectID" class="form-control col-md-9" />
                        <span asp-validation-for="Project.projectID" class="text-danger"></span>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group row">
                        <label asp-for="Project.projectName" class="control-label col-md-3"></label>
                        <input asp-for="Project.projectName" class="form-control col-md-9" />
                        <span asp-validation-for="Project.projectName" class="text-danger"></span>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group row">
                        <label asp-for="Project.projectManager" class="control-label col-md-3"></label>
                        <input asp-for="Project.projectManager" class="form-control col-md-9" />
                        <span asp-validation-for="Project.projectManager" class="text-danger"></span>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group row">
                        <label asp-for="Project.projectClient" class="control-label col-md-3"></label>
                        <input asp-for="Project.projectClient" class="form-control col-md-9" />
                        <span asp-validation-for="Project.projectClient" class="text-danger"></span>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

Then the output as below:

More detail information about Bootstrap style, check Bootstrap 4 Grid System.