Examples
Default styling
Example help text that remains unchanged.

Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.

.has-success
Danger is great for when there’s a blocking or required field. A user must fill in this field properly to submit the form.
Example help text that remains unchanged.

Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.

.has-warning
Warning works well for input values that are in progress, like password strength, or soft validation before a user attempts to submit a form.
Example help text that remains unchanged.

Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.

.has-danger
Danger is great for when there’s a blocking or required field. A user must fill in this field properly to submit the form.
Example help text that remains unchanged.

Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.

Markup: components/atoms/forms/forms-custom.twig
<form>
  <div class="form-group [modifier class]">
    <label for="inputEmail3" class="col-sm-2 form-control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control " id="inputEmail3" placeholder="Email">
      <div class="form-control-feedback">Sorry, that username's taken. Try another?</div>
      <small class="form-text text-muted">Example help text that remains unchanged.</small>
    </div>
  </div>
  <div class="form-group [modifier class]">
    <label for="inputPassword3" class="col-sm-2 form-control-label">Password</label>
    <div class="col-sm-10 clearfix">
      <input type="password" class="form-control " id="inputPassword3" placeholder="Password">
      <p id="passwordHelpBlock" class="form-text text-muted">
      Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
    </p>
    </div>
  </div>
  <div class="form-group [modifier class]">
    <label class="col-sm-2">Radios</label>
    <div class="col-sm-10">
      <div class="radio">
        <label>
          <input type="radio" name="gridRadios" id="gridRadios1" value="option1" checked> Option one is this and that&mdash;be sure to include why it's great
        </label>
      </div>
      <div class="radio">
        <label>
          <input type="radio" name="gridRadios" id="gridRadios2" value="option2"> Option two can be something else and selecting it will deselect option one
        </label>
      </div>
      <div class="radio disabled">
        <label>
          <input type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled> Option three is disabled
        </label>
      </div>
      <div class="radio" >
       <label class="custom-control custom-radio">
        <input id="radio1" name="radio" type="radio" class="custom-control-input">
        <span class="custom-control-indicator"></span>
        <span class="custom-control-description">Toggle this custom radio</span>
      </label>
      <label class="custom-control custom-radio">
        <input id="radio2" name="radio" type="radio" class="custom-control-input">
        <span class="custom-control-indicator"></span>
        <span class="custom-control-description">Or toggle this other custom radio</span>
      </label>
      </div>
    </div>
  </div>
  <div class="form-group [modifier class]">
    <label class="col-sm-2">Checkbox</label>
    <div class="col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Check me out
        </label>
        <label class="custom-control custom-checkbox">
          <input type="checkbox" class="custom-control-input">
          <span class="custom-control-indicator"></span>
          <span class="custom-control-description">Check this custom checkbox</span>
        </label>
      </div>
    </div>
  </div>
  <div class="form-group [modifier class]">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-secondary">Sign in</button>
    </div>
  </div>
  <div class="form-group [modifier class]">
    <label>Range input</label>
    <input id="range" type="range" min="0" max="25" step="0.02">
  </div>
  <div class="form-group [modifier class]">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input" disabled="disabled">
  </div>
  <div class="form-group [modifier class]">
    <select class="custom-select">
      <option selected>Open this select menu</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
  </div>
  <div class="form-group [modifier class]">
    <label class="custom-file">
      <input type="file" id="file" class="custom-file-input">
      <span class="custom-file-control"></span>
    </label>
  </div>
</form>
Source: components/atoms/forms/_forms.scss, line 39