Bs Forms

Bootstrap Forms

---

Bootstrap's Default Settings

Form controls automatically have about global styling with Bootstrap:
All textual <input>, <textarea>, in addition to <select> elements with shape .form-control bring a width of 100%.

---

Bootstrap Form Layouts

Bootstrap provides 3 types of shape layouts:

• Vertical shape (this is default)
• Horizontal form
• Inline form

Standard rules for all 3 shape layouts:

• Wrap labels in addition to shape controls inwards <div class="form-group"> (needed for optimum spacing)
• Add shape .form-control to all textual <input>, <textarea>, in addition to <select> elements

---

Bootstrap Vertical Form (default)

Email:

Password:

Remember me

The next instance creates a vertical shape with ii input fields, 1 checkbox, in addition to a submit button:

Example

<form>
  <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>
  <div class="checkbox">
    <label><input type="checkbox"> Remember me</label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

---

Bootstrap Inline Form

Email:

Password:

Remember me

In an inline form, all of the elements are inline, left-aligned, in addition to the labels are alongside.
Note: This alone applies to forms inside viewports that are at to the lowest degree 768px wide!
Additional dominion for an inline form:

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

The next instance creates an inline shape with ii input fields, 1 checkbox, in addition to 1 submit button:

Example

<form class="form-inline">
  <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>
  <div class="checkbox">
    <label><input type="checkbox"> Remember me</label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

Tip: If yous don't include a label for every input, cover readers volition bring problem with your forms. You tin ship away shroud the labels for all devices, except cover readers, yesteryear using the .sr-only class:

Example

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="email">Email address:</label>
    <input type="email" class="form-control" id="email">
  </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>

---

Bootstrap Horizontal Form

Email:

Password:

Remember me

Influenza A virus subtype H5N1 horizontal shape way that the labels are aligned adjacent to the input champaign (horizontal) on large in addition to medium screens. On modest screens (767px in addition to below), it volition transform to a vertical shape (labels are placed on acme of each input).
Additional rules for a horizontal form:

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

Tip: Use Bootstrap's predefined grid classes to align labels in addition to groups of shape controls inwards a horizontal layout.
The next instance creates a horizontal shape with ii input fields, 1 checkbox, in addition to 1 submit button.

Example

<form class="form-horizontal">
  <div class="form-group">
    <label class="control-label col-sm-2" for="email">Email:</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="email" 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>
  <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>

---