How to align nested form rows using Bootstrap 4?

Last Updated : 26 Nov, 2020

Bootstrap is a CSS framework used to design web pages. Bootstrap along with HTML and JavaScript results in interactive web designs. The most recent release is Bootstrap v4.5. Bootstrap has a variety of components and utilities. The Bootstrap components include the form component. Bootstrap has an inbuilt form control class that is used to create forms and corresponding form input fields. The Bootstrap form component allows the creation of forms using nested rows. Rows and Columns are yet another utility in Bootstrap that can be used to align the nested form rows.

In this article, we shall see two examples to align the nested form rows of which one makes use of the form-group class whereas the other example uses the concept of rows and columns only to display the desired structure.

Example 1: In this example, the main container is defined which consists of the nested form rows. Within the container, a form-group row class is defined with a column of the width of 7 units. This column again consists of a form-group row which comprises two columns. The first column is used to specify the labels for the input field and the second column is used to define the input fields.

Since the column width is defined the form labels and input field do not exceed the column size and therefore remain aligned. The button is aligned with the input fields of the form by placing it in the second column of the nested row and keeping the first column vacant.

Code Implementation:

HTML

<!DOCTYPE html>
<html>

<head>
    <!-- Import bootstrap cdn -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
        integrity=
"sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
        crossorigin="anonymous">

    <!-- Import jquery cdn -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" 
        integrity=
"sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous">
    </script>
    
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" 
        integrity=
"sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" 
        crossorigin="anonymous">
    </script>
</head>

<body>
    <div class="container mt-2 ml-2">
        <div class="form-group row">
            <div class="col-sm-7">
                <div class="form-group row">
                    <label for="description" 
                        class="col-sm-5 col-form-label">
                        Name
                    </label>
                    <div class="col-sm-7">
                        <input type="text" 
                            class="form-control">
                    </div>
                </div>
                <div class="form-group row">
                    <label for="description" 
                        class="col-sm-5 col-form-label">
                        Institute
                    </label>
                    <div class="col-sm-7">
                        <input type="text" 
                            class="form-control">
                    </div>
                </div>
                <div class="form-group row">
                    <label for="description" 
                        class="col-sm-5 col-form-label">
                        Degree
                    </label>
                    <div class="col-sm-7">
                        <input type="text" 
                            class="form-control">
                    </div>
                </div>
                <div class="form-group row">
                    <label for="description" 
                        class="col-sm-5 col-form-label">
                        Year of Graduation
                    </label>
                    <div class="col-sm-7">
                        <input type="text" 
                            class="form-control">
                    </div>
                </div>
                <div class="form-group row">
                    <label for="description" 
                        class="col-sm-5 col-form-label">
                        Diploma/Part Time/Full Time
                    </label>
                    <div class="col-sm-7">
                        <input type="text" 
                            class="form-control">
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-5"></div>
                    <div class="col-sm-7">
                        <button type="button" 
                            class="btn btn-success btn-md">
                            Proceed
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

Output:

Example 2: In this example, the main container is defined which consists of the nested rows. Within the container, a row class is defined which has a column with a width of 7 units. This column again consists of a row that comprises two columns. The first column is used to specify the labels for the input field and the second column is used to define the input fields. Since the column width is defined the form labels and input field do not exceed the column size and therefore remain aligned. At last, a button is positioned in proper alignment with the input fields of the form. It is similar to the first approach except we do not make use of the form-group class.

Code Implementation: