Bootstrap Forms

Bootstrap provides three different types of form layouts:

• Vertical Form
• Horizontal Form
• Inline Form

Steps to create Vertical Inline Form Layout

• Use the <form> element as parent.
• Wrap labels and controls in a <div> with class .form-group.
• Add a class of .form-control to the Input field.

Example of Code

<form>
    <div class="form-group">
      <label for="Name">Name</label>
      <input type="text" class="form-control" id="Name" placeholder="please insert your Name">
    </div>
    <div class="form-group">
      <label for="Age">Password</label>
      <input type="text" class="form-control" id="age" placeholder="please insert your age">
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

Output

Steps to create Horizontal Inline Form Layout

• Use the <form> element as parent.
• Wrap labels and controls in a <div> with class .form-group.
• Add a class of .control-label to the labels.
• Add another class of .form-control to the Input field.

Example of Code

<form action="" method="post">
  <div class="form-group row">
    <label for="inputEmail" class="col-sm-1 col-form-label">Name</label>
    <div class="col-sm-11">
      <input type="text" class="form-control" id="Name" placeholder="please insert your Name" required>
    </div>
  </div>
  <div class="form-group row">
    <label for="Age" class="col-sm-1 col-form-label">Age</label>
    <div class="col-sm-11">
      <input type="text" class="form-control" id="Age" placeholder="please insert your Age" required>
    </div>
  </div>
  <div class="form-group row">
    <div class="col-sm-10 offset-sm-2">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

Output

Steps to create Bootstrap Inline Form Layout

• Use the <form> element as parent and a class .form-inline.
• Wrap labels and controls in a <div> with class .form-group.
• Add a class of .control-label to the labels.
• Add another class of .form-control to the Input field.

Example of Code

<form class="form-inline" action=" " method="post">
  <div class="form-group mr-2">
    <label for="Name">Name</label>
    <input type="text" class="form-control" id="Name" placeholder="please insert your Name" required>
  </div>
  <div class="form-group mr-2">
    <label for="age">Age</label>
    <input type="text" class="form-control" id="age" placeholder="please insert your age" required>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>

Output