Post
Ask Question

How To Create A Login Form In Bootstrap

In Bootstrap, creating a responsive web page is a piece of cake, as Bootstrap has classes to create web design.
 
Bootstrap has different types of form layout given below.
  • Vertical form (this is default)
  • Horizontal form
  • Inline form
Now, create all style forms, one by one
 
Vertical form
 
We used some classes like form-group, form-control, checkbox, btn and btn-primary.
 
Example
  1. <html>  
  2.   
  3. <head>  
  4.     <title>Bootstrap Example</title>  
  5.     <meta charset="utf-8">  
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">  
  7.     <link rel="stylesheet" href="https//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  
  8.     <script src="https//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>  
  9.     <script src="https//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  
  10. </head>  
  11.   
  12. <body>  
  13.     <div class="container">  
  14.         <h2>Vertical form</h2>  
  15.         <form>  
  16.             <div class="form-group"> <label for="email">User Name</label> <input type="email" class="form-control" id="email" placeholder="Enter email"> </div>  
  17.             <div class="form-group"> <label for="pwd">Password</label> <input type="password" class="form-control" id="pwd" placeholder="Enter password"> </div>  
  18.             <div class="checkbox"> <label><input type="checkbox"> Remember me</label> </div> <button type="submit" class="btn btn-primary">Submit</button> </form>  
  19.     </div>  
  20. </body>  
  21.   
  22. </html>  
Output
 
 
Explanation
  • form-group
    This class binds the label and input in the group.

  • form-control
    This class creates an input form.

  • checkbox
    This class is used to create a checkbox.

  • btn btn-primary
    The classes are used to create a blue color button.
Horizontal form

We used some classes like form-horizontal, form-group, control-label col-sm-2, form-control, checkbox and btn btn-primary.
 
Example 
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.   
  4. <head>  
  5.     <title>Ajay malik bootstrap example</title>  
  6.     <meta charset="utf-8">  
  7.     <meta name="viewport" content="width=device-width, initial-scale=1">  
  8.     <link rel="stylesheet" href="https//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  
  9.     <script src="https//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>  
  10.     <script src="https//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  
  11. </head>  
  12.   
  13. <body>  
  14.     <div class="container">  
  15.         <h2>Horizontal form</h2>  
  16.         <form class="form-horizontal">  
  17.             <div class="form-group"> <label class="control-label col-sm-2" for="email">User Name</label>  
  18.                 <div class="col-sm-10"> <input type="email" class="form-control" id="email" placeholder="Enter email"> </div>  
  19.             </div>  
  20.             <div class="form-group"> <label class="control-label col-sm-2" for="pwd">Password</label>  
  21.                 <div class="col-sm-10"> <input type="password" class="form-control" id="pwd" placeholder="Enter password"> </div>  
  22.             </div>  
  23.             <div class="form-group">  
  24.                 <div class="col-sm-offset-2 col-sm-10">  
  25.                     <div class="checkbox"> <label><input type="checkbox"> Remember me</label> </div>  
  26.                 </div>  
  27.             </div>  
  28.             <div class="form-group">  
  29.                 <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-primary">Submit</button> </div>  
  30.             </div>  
  31.         </form>  
  32.     </div>  
  33. </body>  
  34.   
  35. </html>  
Output

 
 
Explanation
  • form-group
    This class binds the label and input in the group.

  • form-control
    This class creates an input form.

  • checkbox
    This class is used to create a checkbox.

  • btn btn-primary
    The classes are used to create a blue color button.

  • form-horizontal
    The class used to create a horizontal form. 
Inline form
 
We used some classes like form-inline, form-group, form-control, sr-only, checkbox and btn btn-danger.
 
Example
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.   
  4. <head>  
  5.     <title>Ajay Malik Bootstrap Example</title>  
  6.     <meta charset="utf-8">  
  7.     <meta name="viewport" content="width=device-width, initial-scale=1">  
  8.     <link rel="stylesheet" href="https//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  
  9.     <script src="https//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>  
  10.     <script src="https//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  
  11. </head>  
  12.   
  13. <body>  
  14.     <div class="container">  
  15.         <h2>Inline form</h2>  
  16.         <form class="form-inline">  
  17.             <div class="form-group"> <label class="sr-only" for="email">User Name</label> <input type="email" class="form-control" id="email" placeholder="Enter email"> </div>  
  18.             <div class="form-group"> <label class="sr-only" for="pwd">Password</label> <input type="password" class="form-control" id="pwd" placeholder="Enter password"> </div>  
  19.             <div class="checkbox"> <label><input type="checkbox"> Remember me</label> </div> <button type="submit" class="btn btn-danger">Submit</button> </form>  
  20.     </div>  
  21. </body>  
  22.   
  23. </html>  
Output
 
 
Explanation
  • form-group
    This class binds the label and input in the group.

  • form-control
    This class creates an input form.

  • checkbox
     This class is used to create a checkbox.

  • btn btn-danger
    The classes are used to create a red color button.

  • form-inline
    This class used to create an inline form.

  • sr-only
    The class is used to hide the label.