How to align nested form rows using Bootstrap 4? - GeeksforGeeks

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/bootstrap@4.5.3/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/bootstrap@4.5.3/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:
HTML
<!DOCTYPE html><html>  <head>      <!-- Import bootstrap cdn -->    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/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/bootstrap@4.5.3/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="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>
Output:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
Bootstrap-4
Bootstrap-Misc
HTML-Misc
Bootstrap
HTML
Technical Scripter
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Show Images on Click using HTML ?
How to set Bootstrap Timepicker using datetimepicker library ?
How to Use Bootstrap with React?
Tailwind CSS vs Bootstrap
How to keep gap between columns using Bootstrap?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to update Node.js and NPM to next version ?
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?