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>
  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>
  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>
  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">
  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>
  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>
  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">
  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>
  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>
  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.