Skip to content
Related Articles

Related Articles

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <!-- Import bootstrap cdn -->
    <link rel="stylesheet" href=
        integrity=
"sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
        crossorigin="anonymous">
  
    <!-- Import jquery cdn -->
        integrity=
"sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous">
    </script>
      
    <script src=
        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>

chevron_right


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:

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
  
    <!-- Import bootstrap cdn -->
    <link rel="stylesheet" href=
        integrity=
"sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
        crossorigin="anonymous">
  
    <!-- Import jquery cdn -->
        integrity=
"sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous">
    </script>
      
    <script src=
        integrity=
"sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" 
        crossorigin="anonymous">
    </script>
</head>
  
<body>
    <div class="container mt-2 ml-2">
        <div class="row">
            <div class="col-sm-7">
                <div class="row mt-2">
                    <label for="description" 
                        class="col-sm-5">
                        Name
                    </label>
                    <div class="col-sm-7">
                        <input type="text" 
                            class="form-control">
                    </div>
                </div>
                <div class="row mt-2">
                    <label for="description" 
                        class="col-sm-5">
                        Institute
                    </label>
                    <div class="col-sm-7">
                        <input type="text" 
                            class="form-control">
                    </div>
                </div>
                <div class="row mt-2">
                    <label for="description" 
                        class="col-sm-5">
                        Degree
                    </label>
                    <div class="col-sm-7">
                        <input type="text" 
                            class="form-control">
                    </div>
                </div>
                <div class="row mt-2">
                    <label for="description" 
                        class="col-sm-5">
                        Year of Graduation
                    </label>
                    <div class="col-sm-7">
                        <input type="text" 
                            class="form-control">
                    </div>
                </div>
                <div class="row mt-2">
                    <label for="description" 
                        class="col-sm-5">
                        Diploma/Part Time/Full Time
                    </label>
                    <div class="col-sm-7">
                        <input type="text" 
                            class="form-control">
                    </div>
                </div>
                <div class="row mt-2">
                    <div class="col-sm-5"></div>
                    <div class="col-sm-7">
                        <button type="button" 
                            class="btn btn-success btn-md">
                            Proceed
                        </button>
                        <button type="button" 
                            class="btn btn-danger btn-md">
                            Reset
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
  
</html>

chevron_right


Output:

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :