WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

Bootstrap Forms


Bootstrap Default Settings

We can change Form controls automatically receive some global styling with Bootstrap

BS form have <input>, <textarea>, and <select> elements with class .form-control have a width of 100%.


Bootstrap Form Layouts

BS provides three types of form layouts:

  • Inline form
  • Vertical form
  • Horizontal form

Standard rules for all three form layouts:

  • You can always use <form role="form">
  • Wrap labels and form controls in <div class="form-group">
  • Add class .form-control to all textual <input>, <textarea>, and <select> elements

Bootstrap Vertical Form

The below example creates a vertical form with two input fields, one checkbox, and a submit button:

Example

<form role="form">
  <div class="form-group">
    <label for="User">User :</label>
    <input type="User" class="form-control" id="User">
  </div>
  <div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd">
  </div>
  <div class="checkbox">
    <label><input type="checkbox"> Remember me</label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>
Try it Yourself »

Bootstrap Inline Form

In an inline form, all of the elements are inline, left-aligned, and the labels are alongside.

Additional rule for an inline form:

  • Add class .form-inline to the <form> element

The following example creates an inline form with two input fields, one checkbox, and one submit button:

Example

<form class="form-inline" role="form">
  <div class="form-group">
    <label for="User">User :</label>
    <input type="User" class="form-control" id="User">
  </div>
  <div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd">
  </div>
  <div class="checkbox">
    <label><input type="checkbox"> Remember me</label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>
Try it Yourself »

Example

<form class="form-inline" role="form">
  <div class="form-group">
    <label class="sr-only" for="User">User :</label>
    <input type="User" class="form-control" id="User">
  </div>
  <div class="form-group">
    <label class="sr-only" for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd">
  </div>
  <div class="checkbox">
    <label><input type="checkbox"> Remember me</label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>
Try it Yourself »

Bootstrap Horizontal Form

A horizontal form stands apart from the other forms both in the amount of markup, and in the presentation of the form.

Additional rules for a horizontal form:

  • Add class .form-horizontal to the <form> element
  • Add class .control-label to all <label> elements

The following example creates a horizontal form with two input fields, one checkbox, and one submit button:

Example

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label class="control-label col-sm-2" for="User">User:</label>
    <div class="col-sm-10">
      <input type="User" class="form-control" id="User" placeholder="Enter User">
    </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>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label><input type="checkbox"> Remember me</label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Submit</button>
    </div>
  </div>
</form>
Try it Yourself »