Bootstrap Forms

Bootstrap form layout provides 2 types of form layout

1. Stacked form (full – width)
2. Inline form

Stacked form: 

The stacked form creates one or more input fields and submits the button in a stacked format.

Example:

<div class="container">
 <h2>Stacked form</h2>
 <form action="">
  <div class="form-group">
   <label for="email">Email:</label>
   <input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
  </div>
  <div class="form-group">
   <label for="pwd">Password:</label>
   <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd">
  </div>
  <div class="form-group form-check">
   <label class="form-check-label">
    <input class="form-check-input" type="checkbox" name="remember"> Remember me
   </label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
 </form>
</div>

OUTPUT:

Inline form:

The .form-inline class is used with all of the elements that are inline and left-aligned. The inline form contains all of the elements that are left-aligned and inline.

NOTE: This one only applies to forms within viewports that are at least 576px wide. the screen size is smaller than 576px, it will stack horizontally.

Example:

<div class="container">
 <h2>Bootstrap Inline form</h2>

 <form class="form-inline" action="#">
  <label for="email">Email:</label>
  <input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
  <label for="pwd">Password:</label>
  <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd">
  <div class="form-check">
   <label class="form-check-label">
    <input class="form-check-input" type="checkbox" name="remember"> Remember me
   </label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
 </form>
</div>

OUTPUT:

Inline Form with Utilities:

The inline form feels like “compressed”, and will look much better with Bootstrap’s spacing utilities.  adding a right margin (.mr-sm-2) to each input on all devices, and a margin-bottom class (.mb-2) is used to style the input field when it breaks ( from horizontal to vertical due to not enough space or width).

Example:

 <div class="container-fluid bcontent">
  <h2>Bootstrap Inline Forms with Utilities</h2>
  <hr />
  <form class="form-inline">
   <label for="email" class="mr-sm-2">Email:</label>
   <input type="email" class="form-control mb-2 mr-sm-2" id="email" placeholder="Enter email">
   <label for="password" class="mr-sm-2">Password:</label>
   <input type="password" class="form-control mb-2 mr-sm-2" id="pwd" placeholder="Enter password">
  <div class="form-check mb-2 mr-sm-2">
   <input type="checkbox" class="form-check-input" id="chkletters">
   <label class="form-check-label" for="inlineCheck">Remember me</label>
  </div>
  <button type="submit" class="btn btn-primary mb-2">Submit</button>
 </form>
</div>

OUTPUT:

Form Row/Grid:

You can use columns (.col) to control the width and alignment of form inputs without using spacing utilities. Just put inside a .row container.

Example:

 <div class="container">
  <h2>Bootstrap Form Grid</h2>
  <form action="#">
   <div class="row">
    <div class="col">
     <input type="text" class="form-control" id="email" placeholder="Enter email" name="email">
    </div>
    <div class="col">
     <input type="password" class="form-control" placeholder="Enter password" name="pswd">
    </div>
   </div>
   <button type="submit" class="btn btn-primary mt-3">Submit</button>
  </form>
 </div>

OUTPUT:

Bootstrap Form Validation: 

Add either .was-validated / .needs-validation to the <form> element, whether you want to provide validation feedback before or after submitting the form.The input fields will have a green is valid or red is an invalid border to indicate what’s missing in the validation form.

Example:

<div class="container-fluid">
 <h2>Bootstrap Form Validation</h2>
 <hr />
 <form class="was-validated">
  <div class="form-group">
   <label for="fname">First Name</label>
   <input type="text" class="form-control" id="fname" name="fname" placeholder="Enter first name" required>
   <div class="valid-feedback">Valid.</div>
   <div class="invalid-feedback">Please enter first name.</div>
  </div>
  <div class="form-group">
   <label for="lname">Last Name</label>
   <input type="text" class="form-control" id="lname" placeholder="Enter last name" required>
   <div class="valid-feedback">Valid.</div>
   <div class="invalid-feedback">Please enter last name.</div>
  </div>
  <div class="form-group">
   <label for="email">Email</label>
   <input type="email" class="form-control" id="email" placeholder="Enter email" required>
   <div class="valid-feedback">Valid.</div>
   <div class="invalid-feedback">Please enter email.</div>
  </div>
  <div class="form-group form-check">
   <input type="checkbox" class="form-check-input" id="chkterms" required> I agree all terms & conditions
   <div class="valid-feedback">Valid.</div>
   <div class="invalid-feedback">Please agree terms & conditions.</div>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
 </form>
</div>

OUTPUT: