❮ Bootstrap4 Typography Bootstrap4 Jumbotron ❯

Bootstrap4 Forms

In this chapter, we will learn how to create forms using Bootstrap. Bootstrap allows the creation of various form styles with simple HTML tags and extended classes.

Form elements <input>, <textarea>, and <select> elements, when using the .form-control class, are set to 100% width.

Bootstrap4 Form Layouts

Stacked form (full-width): vertical direction
Inline form: horizontal direction

Bootstrap provides two types of form layouts:

Stacked Form

The following example creates a stacked form with two input boxes, a checkbox, and a submit button:

Example

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

Display effect:

Inline Form

All elements in an inline form are left-aligned.

Note: On screens narrower than 576px, the form will stack vertically; on screens 576px and wider, the form elements will align horizontally.

An inline form requires the .form-inline class on the <form> element.

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

Example

<form class="form-inline">
  <label for="email">Email address:</label>
  <input type="email" class="form-control" id="email">
  <label for="pwd">Password:</label>
  <input type="password" class="form-control" id="pwd">
  <div class="form-check">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Display effect:

The elements in the above example appear very compact. You can use the .mr-sm-2 class to set right margins and the .mb-2 class to set bottom margins:

Example

<form class="form-inline" action="">
  <label for="email" class="mr-sm-2">Email address:</label>
  <input type="email" class="form-control mb-2 mr-sm-2" placeholder="Enter email" id="email">
  <label for="pwd" class="mr-sm-2">Password:</label>
  <input type="password" class="form-control mb-2 mr-sm-2" placeholder="Enter password" id="pwd">
  <div class="form-check mb-2 mr-sm-2">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Display effect:

<form>
  <div class="form-group form-check">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-primary mb-2">Submit</button>
</form>

Display effect:

Form Rows/Grid

We can also use the .col class to control the width and alignment of form elements without using spacing classes. Forms controlled by the .col class need to be placed within a .row container.

The following example displays two columns side by side:

Example

<form>
  <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>
</form>

Display effect:

If a smaller spacing grid is needed, you can use .form-row instead of .row:

Example

<form>
  <div class="form-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>
</form>

Form Validation

We can use different validation classes to set up form validation functionality.

Adding .was-validated or .needs-validation to the <form> element will give input fields a green (valid) or red (invalid) border effect, indicating whether the form requires input.

The .valid-feedback or .invalid-feedback classes are used to inform the user what information is missing or what needs to be completed before submitting the form.

Example

Using the .was-validated class to display what needs to be filled in before submitting the form:

<form action="" class="was-validated">
  <div class="form-group">
    <label for="uname">Username:</label>
    &lt;input type="text" class="form-control" id="uname" placeholder="Enter username" name="uname" required>
    <div class="valid-feedback">Validation successful!</div>
    <div class="invalid-feedback">Please enter a username!</div>
  </div>
  <div class="form-group">
    <label for="pwd">Password:</label>
    &lt;input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd" required>
    <div class="valid-feedback">Validation successful!</div>
    <div class="invalid-feedback">Please enter a password!</div>
  </div>
  <div class="form-group form-check">
    <label class="form-check-label">
      &lt;input class="form-check-input" type="checkbox" name="remember" required> Agree to terms
      <div class="valid-feedback">Validation successful!</div>
      <div class="invalid-feedback">You must agree to the terms to submit.</div>
    </label>

&lt;form action="" class="needs-validation" novalidate>
  <div class="form-group">
    <label for="uname">Username:</label>
    &lt;input type="text" class="form-control" id="uname" placeholder="Enter username" name="uname" required>
    <div class="valid-feedback">Validation successful!</div>
    <div class="invalid-feedback">Please enter a username!</div>
  </div>
  <div class="form-group">
    <label for="pwd">Password:</label>
    &lt;input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd" required>
    <div class="valid-feedback">Validation successful!</div>
    <div class="invalid-feedback">Please enter a password!</div>
  </div>
  <div class="form-group form-check">
    <label class="form-check-label">
      &lt;input class="form-check-input" type="checkbox" name="remember" required> Agree to terms
      <div class="valid-feedback">Validation successful!</div>
      <div class="invalid-feedback">You must agree to the terms to submit.</div>
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

<script>
// Prevent form submission if validation fails
(function() {
  'use strict';
  window.addEventListener('load', function() {
    // Fetch forms to apply custom Bootstrap validation styles to
    var forms = document.getElementsByClassName('needs-validation');
    // Loop over them and prevent submission
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();
</script>

❮ Bootstrap4 Typography Bootstrap4 Jumbotron ❯