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:
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="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:
Similar Reads
How to make Form Responsive using Bootstrap ? We are going to create a responsive form by using Bootstrap 5. responsiveness is a feature that allows users to interact with the web app on any device easily. It helps to create better UI interactions and a better user experience that can be a reason to have great traffic on the respective website.
4 min read
How to align columns in a row on text end using Bootstrap 5 ? In this article, we will see how to align columns in a row on the text end using Bootstrap5. Bootstrap 5 provides a series of classes that can be used to apply various styling to the tables such as changing the heading appearance, making the rows striped, adding or removing borders, making rows hove
2 min read
How to Align Text in Bootstrap Column ? In Bootstrap Framework, we can align the text within the columns using various utility classes. To align text within a Bootstrap column, use the built-in utility classes such as text-start, text-center, and text-end for the left, center, and right alignment, respectively. Simply apply the desired cl
3 min read
How to align content bottom on Bootstrap 4 col ? Bootstrap Grid System allows up to 12 columns across the page. You can use each of them individually or merge them together for wider columns. All combinations of values summing up to 12 can be used. In this article, we will learn about How to align content bottom on Bootstrap 4 col. Table of Conten
2 min read
How to col align right in Bootstrap 5 ? Bootstrap 5 provides a series of classes that can be used to apply various styling to the tables such as changing the heading appearance, making the rows striped, adding or removing borders, making rows hoverable, etc. In this article, we will learn how we can right align the content in Col. We will
3 min read
How to use Bootstrap to align labels with content into 4 columns ? The motive of this article is to align the content into four columns where the first two columns denote the labels and its content and the last two columns denote the labels and its content. The class "row" and "col" are used to create a grid which can be represented by a number of rows and columns.
2 min read