How to Style Gravity Forms with Bootstrap 4

Gravity Forms settings

Navigate to Forms > Settings from the WordPress admin:

1. Set Output CSS to No
2. Set Output HTML5 to Yes

The included Gravity Forms CSS includes too many styles (their minified styles are still 135 KB) you’d need to override, so it’s easier to start from scratch.

General styling for Gravity Forms

/** Gravity Forms */
.gform_wrapper form {
  margin-bottom: 0;
}

.gform_wrapper ul {
  @extend .list-unstyled;
}

.gform_wrapper li {
  @extend .form-group;
}

.gform_wrapper .gfield_required {
  padding-left: 1px;
  color: $danger;
}

.gform_wrapper input[type="email"],
.gform_wrapper input[type="date"],
.gform_wrapper input[type="datetime"],
.gform_wrapper input[type="datetime-local"],
.gform_wrapper input[type="month"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="password"],
.gform_wrapper input[type="search"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="text"],
.gform_wrapper input[type="time"],
.gform_wrapper input[type="week"],
.gform_wrapper input[type="url"],
.gform_wrapper select,
.gform_wrapper textarea {
  @extend .form-control;
}

.gform_wrapper .button {
  @extend .btn;
  @extend .btn-primary;
}

.gform_wrapper .gfield_error {
  .gfield_label {
    @extend .alert-danger;
  }

  input,
  select,
  textarea {
    @extend .alert-danger;
  }
}

.validation_error {
  @extend .alert;
  @extend .alert-danger;
}

.validation_message {
  display: none;
}

Join the discussion on Roots Discourse