1.

Three types of Form Layouts in Bootstrap

Answer»

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


Discussion

No Comment Found

Related InterviewSolutions