Please allow ads on our site
Please log in to access this content. You will be redirected to the login page shortly.
LoginThree types of Form Layouts in Bootstrap
Web Development Bootstrap in Web Development 3 years ago
Form Layout in Bootstrap has the following three forms:
- Vertical Form
- Horizontal Form
- Inline Form
Let us learn about them one by one:
Vertical Form
This is the default form in Bootstrap. Let us see a code snippet to understand it:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta CHARSET="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script SRC="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Vertical Form in Bootstrap</h2> <div class="form-group"> <label for="email">UserId (Email):</label> <input type="email" class="form-control" id="useremail"> </div> <div class="form-group"> <label for="pwd">Password:</label> <input type="password" class="form-control" id="pwd"> </div> </div> </body> </html>The above DISPLAYS the following vertical form as the output:
Horizonal Form
The form-horizonal class is used in Bootstrap for Horizontal form. The labels are ALIGNED horizontally next to the input field on large and medium screens. However, on small screens i.e. < 767px, it will get converted to a vertical form. The form would then look like labels on top of each input).
Let us see a code to understand it:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Horizontal Form in Bootstrap</h2> <form class="form-horizontal" action=""> <div class="form-group"> <label class="control-label col-sm-2" for="email">UserId(Email):</label> <div class="col-sm-10"> <input type="email" class="form-control" id="useremail" placeholder="Enter email"> </div> </div> <div class="form-group"> <label class="control-label col-sm-2" for="pwd">Password:</label> <div class="col-sm-10"> <input type="password" class="form-control" id="pwd" placeholder="Enter password"> </div> </div> </form> </div> </body> </html>Here is the output when the screen size is below 767 px:
Here is the output when the screen size is above 767 px:
Inline Form
Inline forms are the forms in which the elements are inline and left-aligned. For using it, add class .form-inline to the <form> tag.
Let us see an example:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Inline Form in Bootstrap</h2> <form class="form-inline" action=""> <div class="form-group"> <label for="email">Email ADDRESS:</label> <input type="email" class="form-control" id="email"> </div> <div class="form-group"> <label for="pwd">Password:</label> <input type="password" class="form-control" id="pwd"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> </div> </body> </html>Here is the output when the screen size is below 767 px:
Here is the output when the screen size is above 767 px. All the elements are now inline and left-aligned
Posted on 31 May 2022, this text provides information on Web Development related to Bootstrap in Web Development. Please note that while accuracy is prioritized, the data presented might not be entirely correct or up-to-date. This information is offered for general knowledge and informational purposes only, and should not be considered as a substitute for professional advice.
Take Quiz To Earn Credits!
Turn Your Knowledge into Earnings.
Answers
No matter what stage you're at in your education or career, TuteeHub will help you reach the next level that you're aiming for. Simply,Choose a subject/topic and get started in self-paced practice sessions to improve your knowledge and scores.
