• Sage

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

Join over 5,800 subscribers on our newsletter to get the latest Roots updates, along with occasional tips on building better WordPress sites.

Looking for WordPress plugin recommendations, the newest modern WordPress projects, and general web development tips and articles?

“Easily the best WordPress email I get.” Colin OBrien

Follow us on Twitter @rootswp

Ready to checkout?