The basic form in Bootstrap always displays its contents in a vertical manner, which means that labels for form <input> elements are displayed above them. With Bootstrap 4, the <fieldset> elements do not have any borders, padding, or margins, and they can be used to wrap inputs into groups by setting the <fieldset> element's class to .form-group. Form elements can also be grouped by placing them inside a <div> element with a class of .form-group.

In the HTML markup that follows, a HTML form will be created using the new ASP.NET Core Tag Helpers containing two Bootstrap form input elements and a submit button. Notice that two form groups are created, one using a <fieldset> element and the other a <div> element:

<div class="container"> 
 
    <form asp-controller="Account" asp-action="Login" method="post"> 
 
        <fieldset class="form-group"> 
            <label asp-for="Username">Username</label> 
            <input asp-for="Username" class="form-control" placeholder=
             "Enter your username"/> 
        </fieldset> 
 
 
        <div class="form-group"> 
            <label asp-for="Password">Password</label> 
            <input asp-for="Password" class="form-control" placeholder=
             "Enter your password"/> 
        </div> 
        <button type="submit" class="btn btn-primary">Submit</button> 
 
    </form> 
 
</div> 

The form will look like the following screenshot in your browser:

Inline forms are forms whose elements are aligned next to each other. Inline forms will only work on devices with viewports that have a width higher or equal to 768 px. It is good practice to always include labels for your form elements in order for screen readers to be able to read your forms.

If you wish to hide the labels for your form elements, set its label's class to .sr-only. In the following code, we'll use the login form and set its <form> element's class to .form-inline. Also note the labels are not visible, because of their .sr-only class names:

<div class="container"> 
 
    <h1>Log in - Basic/Vertical Form</h1> 
 
    <form asp-controller="Account" asp-action="Login" method="post"> 
 
        <fieldset class="form-group"> 
            <label asp-for="Username">Username</label> 
            <input asp-for="Username" class="form-control" placeholder=
             "Enter your username"/> 
        </fieldset> 
 
 
        <div class="form-group"> 
            <label asp-for="Password">Password</label> 
            <input asp-for="Password" class="form-control" placeholder=
             "Enter your password"/> 
        </div> 
        <button type="submit" class="btn btn-primary">Submit</button> 
 
    </form> 
 
</div> 

This will render the following form in your browser:

If you need more control over the layout of your Bootstrap forms, you can use the predefined grid classes. With Bootstrap 3, if you wanted to create a horizontal form, you would've given the <form> tag a class name of .form-horizontal. In order to create a horizontal Bootstrap 4 form, you'll need to add the .row class to the .form-group<div> or <fieldset> elements and use the .col-* class name to specify the form control and label sizes.

To vertically align a form component's label, set the label's class to .form-control-label. In the following code, the same login form as before is created as a horizontally aligned form:

<div class="container"> 
 
    <h1>Log in - Horizontal/Grid Form</h1> 
 
    <form asp-controller="Account" asp-action="Login" method="post"> 
 
        <fieldset class="form-group row"> 
            <label asp-for="Username" class="col-sm-3 form-control-label">
             Username</label> 
            <div class="col-sm-9"> 
                <input asp-for="Username" class="form-control" 
                 placeholder="Enter your username" /> 
            </div> 
        </fieldset> 
 
        <div class="form-group row"> 
            <label asp-for="Password" class="col-sm-3 form-control-label">
             Password</label> 
            <div class="col-sm-9"> 
                <input asp-for="Password" class="form-control" 
                 placeholder="Enter your password" /> 
            </div> 
        </div> 
        <button type="submit" class="btn btn-primary">Submit</button> 
 
    </form> 
 
</div> 

The resulting HTML form will look similar to the following screenshot: